| | |
| | | class="upload-demo" |
| | | :action="uploadUrl" |
| | | :headers="uploadHeaders" |
| | | :file-list="imageList" |
| | | :file-list="imageListMap[header.name] || []" |
| | | :auto-upload="true" |
| | | list-type="picture-card" |
| | | :beforeUpload="beforeImageUpload" |
| | | :on-change="handleImageChange" |
| | | :on-remove="handleImageRemove" |
| | | :on-success="handleImageSuccess" |
| | | :before-upload="beforeImageUpload" |
| | | :on-change="(file, fileList) => handleImageChange(file, fileList, header.name)" |
| | | :on-remove="(file, fileList) => handleImageRemove(file, fileList, header.name)" |
| | | :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, header.name)" |
| | | :on-preview="handlePreview" |
| | | :disabled="!checkEditPermission(header)" |
| | | multiple |
| | | > |
| | | <div |
| | | style=" |
| | |
| | | uploadHeaders: { |
| | | Authorization: sessionStorage.getItem("token") || "", |
| | | }, |
| | | imageListMap: {}, |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | this.headerList.forEach((header) => { |
| | | if (header.type === "user") { |
| | | formData[header.name] = []; |
| | | } else if (header.type === "image") { |
| | | formData[header.name] = []; |
| | | this.$set(this.imageListMap, header.name, []); |
| | | } else { |
| | | formData[header.name] = ""; |
| | | } |
| | |
| | | this.headerList.forEach((header) => { |
| | | if (header.type === "user") { |
| | | formData[header.name] = data[header.name] || []; |
| | | } else if (header.type === "image") { |
| | | formData[header.name] = Array.isArray(data[header.name]) ? data[header.name] : (data[header.name] ? [data[header.name]] : []); |
| | | this.$set(this.imageListMap, header.name, (formData[header.name] || []).map(url => ({ name: "image", url: getFullUrl(url), status: "success" }))); |
| | | } else { |
| | | formData[header.name] = data[header.name] || ""; |
| | | } |
| | |
| | | } |
| | | return true; |
| | | }, |
| | | handleImageChange(file, fileList) { |
| | | this.imageList = fileList; |
| | | const imageHeader = this.headerList.find((h) => h.type === "image"); |
| | | if (imageHeader) { |
| | | this.$refs.form.validateField(imageHeader.name); |
| | | } |
| | | handleImageChange(file, fileList, fieldName) { |
| | | this.$set(this.imageListMap, fieldName, fileList); |
| | | // 校验 |
| | | this.$refs.form && this.$refs.form.validateField(fieldName); |
| | | }, |
| | | handleImageSuccess(res, file, fileList) { |
| | | handleImageSuccess(res, file, fileList, fieldName) { |
| | | const url = res.msg; |
| | | file.url = getFullUrl(url); |
| | | const imageHeader = this.headerList.find((h) => h.type === "image"); |
| | | if (imageHeader) { |
| | | this.$set(this.form, imageHeader.name, url); |
| | | this.$refs.form.validateField(imageHeader.name); |
| | | if (!Array.isArray(this.form[fieldName])) { |
| | | this.$set(this.form, fieldName, []); |
| | | } |
| | | this.imageList = fileList.map((f) => { |
| | | if (f.uid === file.uid) { |
| | | return file; |
| | | } |
| | | return f; |
| | | }); |
| | | // 只保留 fileList 中的 url |
| | | this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : '')); |
| | | this.$set(this.imageListMap, fieldName, fileList); |
| | | this.$refs.form && this.$refs.form.validateField(fieldName); |
| | | }, |
| | | handleImageRemove(file, fileList) { |
| | | const imageHeader = this.headerList.find((h) => h.type === "image"); |
| | | if (imageHeader) { |
| | | this.$set(this.form, imageHeader.name, ""); |
| | | } |
| | | this.imageList = fileList; |
| | | handleImageRemove(file, fileList, fieldName) { |
| | | this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : '')); |
| | | this.$set(this.imageListMap, fieldName, fileList); |
| | | }, |
| | | handlePreview(file) { |
| | | this.imagePreviewUrl = file.url; |