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,6 +145,37 @@ const afterRead = async (files) => { ...@@ -144,6 +145,37 @@ 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);
148 + return { imgUrl };
149 +};
150 +
151 +var muliUpload = async (files) => {
152 + for (let item of files) {
153 + const res = await handleUpload(item);
154 + console.warn(res.imgUrl.src);
155 + // 上传失败提示
156 + if (!res.imgUrl.src) {
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 + }
170 + }
171 +};
172 +
173 +const afterRead = async (files) => {
174 + if (Array.isArray(files)) {
175 + // 多张图片上传files是一个数组
176 + muliUpload(files);
177 + } else {
178 + const { imgUrl } = await handleUpload(files);
147 // 上传失败提示 179 // 上传失败提示
148 if (!imgUrl.src) { 180 if (!imgUrl.src) {
149 files.status = "failed"; 181 files.status = "failed";
...@@ -157,15 +189,19 @@ const afterRead = async (files) => { ...@@ -157,15 +189,19 @@ const afterRead = async (files) => {
157 url: imgUrl.src, 189 url: imgUrl.src,
158 isImage: true, 190 isImage: true,
159 }); 191 });
160 - 192 + loading.value = false;
193 + }
194 + }
195 + fileList.value = fileList.value.filter((item) => {
196 + if (item.url) return item;
197 + });
161 props.item.value = { 198 props.item.value = {
162 key: "image_uploader", 199 key: "image_uploader",
163 filed_name: props.item.key, 200 filed_name: props.item.key,
164 value: fileList.value, 201 value: fileList.value,
165 }; 202 };
166 emit("active", props.item.value); 203 emit("active", props.item.value);
167 - loading.value = false; 204 + console.warn(fileList.value);
168 - }
169 }; 205 };
170 206
171 const beforeDelete = (files) => { 207 const beforeDelete = (files) => {
......