hookehuyr

新增上传多张图片功能

...@@ -130,7 +130,8 @@ const uploadQiniu = async (file, token, filename) => { ...@@ -130,7 +130,8 @@ const uploadQiniu = async (file, token, filename) => {
130 }; 130 };
131 /****************** END *******************/ 131 /****************** END *******************/
132 132
133 -const afterRead = async (files) => { 133 +const handleUpload = async (files) => {
134 + // 上传图片流程
134 loading.value = true; 135 loading.value = true;
135 // 获取HASH值 136 // 获取HASH值
136 const hash = getEtag(files.content); 137 const hash = getEtag(files.content);
...@@ -144,30 +145,65 @@ const afterRead = async (files) => { ...@@ -144,30 +145,65 @@ const afterRead = async (files) => {
144 files.status = "uploading"; 145 files.status = "uploading";
145 files.message = "上传中..."; 146 files.message = "上传中...";
146 const imgUrl = await uploadQiniu(files.file, token, filename); 147 const imgUrl = await uploadQiniu(files.file, token, filename);
147 - // 上传失败提示 148 + return { imgUrl };
148 - if (!imgUrl.src) { 149 +};
149 - files.status = "failed";
150 - files.message = "上传失败";
151 - loading.value = false;
152 - } else {
153 - files.status = "";
154 - files.message = "";
155 - fileList.value.pop();
156 - fileList.value.push({
157 - url: imgUrl.src,
158 - isImage: true,
159 - });
160 150
161 - props.item.value = { 151 +var muliUpload = async (files) => {
162 - key: "image_uploader", 152 + for (let item of files) {
163 - filed_name: props.item.key, 153 + const res = await handleUpload(item);
164 - value: fileList.value, 154 + console.warn(res.imgUrl.src);
165 - }; 155 + // 上传失败提示
166 - emit("active", props.item.value); 156 + if (!res.imgUrl.src) {
167 - loading.value = false; 157 + item.status = "failed";
158 + item.message = "上传失败";
159 + loading.value = false;
160 + } else {
161 + item.status = "";
162 + item.message = "";
163 + // fileList.value.pop();
164 + fileList.value.push({
165 + url: res.imgUrl.src,
166 + isImage: true,
167 + });
168 + loading.value = false;
169 + }
168 } 170 }
169 }; 171 };
170 172
173 +const afterRead = async (files) => {
174 + if (Array.isArray(files)) {
175 + // 多张图片上传files是一个数组
176 + muliUpload(files);
177 + } else {
178 + const { imgUrl } = await handleUpload(files);
179 + // 上传失败提示
180 + if (!imgUrl.src) {
181 + files.status = "failed";
182 + files.message = "上传失败";
183 + loading.value = false;
184 + } else {
185 + files.status = "";
186 + files.message = "";
187 + fileList.value.pop();
188 + fileList.value.push({
189 + url: imgUrl.src,
190 + isImage: true,
191 + });
192 + loading.value = false;
193 + }
194 + }
195 + fileList.value = fileList.value.filter((item) => {
196 + if (item.url) return item;
197 + });
198 + props.item.value = {
199 + key: "image_uploader",
200 + filed_name: props.item.key,
201 + value: fileList.value,
202 + };
203 + emit("active", props.item.value);
204 + console.warn(fileList.value);
205 +};
206 +
171 const beforeDelete = (files) => { 207 const beforeDelete = (files) => {
172 fileList.value = fileList.value.filter((item) => { 208 fileList.value = fileList.value.filter((item) => {
173 if (item.url !== files.url) return item; 209 if (item.url !== files.url) return item;
......