Today there is a pit where you upload pictures and files at the same time, and pictures show thumbnails and files show lists.

Here’s my idea:

First of all, only upload attached photos, which can be seen directly from the official example of ELE. Not only upload attached photos, but also upload other parameters.

Then, upload photos and files, upload other parameters, which is actually file merge.



Upload photos and other parameters

The page style looks something like this, with parameters like priority, occurrence time, service order name, service order description, image attachment upload.





(I) View part code: 

<el-form-item prop="image" label="Picture attachment upload">
          <el-upload
            ref="upload"
            :action="uploadAction"
            :beforeUpload="beforeUploadPicture"
            :on-change="imageChange"
            list-type="picture-card"
            name="files"
            :data="paramsData"
            :limit="3"
            multiple
            :auto-upload="false"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemovePicture">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
     </el-form-item>

 <el-button size="mini" type="primary" @click="confirm()"> determine < / el - button >Copy the code
Description:

1. The action variable is the address of the back-end image interface

2, beforeUpload method refers to the function triggered beforeUpload, can be used to do front-end file format judgment, file size judgment

3. The on-change method means that every time a file is selected, a function is triggered, which can be used to front-end delete and add photos

4. The list-type attribute refers to the way the picture-card is displayed

5. Name refers to the field name of the uploaded file, which is the field name of the backend confirmation file stream. You can write it freely

6. The data attribute refers to the additional parameters attached to the upload, which refers to the other parameters

7. The limit attribute indicates the maximum number of uploaded files.

The multiple attribute indicates that multiple files can be selected at a time. True indicates multiple files and false indicates single files

9. The auto-upload attribute indicates an automatic upload. The value can be true or false

10. The on-preview method refers to the method of viewing thumbnails

11. The on-remove method refers to a method that removes files

Ref binds the DOM element



(2) Data part code 

data () {
    return {
      selectedCategorySpe: this.selectedCategory,
      serviceForm: {
        title: ' ',
        desc: ' ',
        priority: ' ',
        occurDate: ' '
      },
       dialogImageUrl: ' ',
       dialogVisible: false,
      uploadAction: "/inner/event/order/submit/submit" + "&accessToken=" + this.$store.getters.token
    }
  },Copy the code




(3) Computed part of code 

computed: { ... mapGetters(['constConfig'
    ]),
    paramsData: function () {
      let params = {
        eventCategory: this.selectedCategorySpe.categoryId,
          priority: this.serviceForm.priority,
          title: this.serviceForm.title,
          dsc: this.serviceForm.desc,
          occurDate: this.serviceForm.occurDate
      }
      return params
    }
  },Copy the code
Using the computed the value of the real-time monitoring paramsData. As long as selectedCategorySpe categoryId, serviceForm. Priority, serviceForm. Title

Serviceform. desc and ServiceForm. occurDate have only one change and recalculate the value of paramsData.



(d) Methods 

beforeUploadPicture(file){
      const isImage = file.type == 'image/png' || file.type == 'image/jpg' ||  file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
      const isLt2M = file.size <  1024 * 1024 * 2;
      if(! isImage) { this.$message.error('upload only PNG, JPG, jpeg, BMP, GIF, webp! ');
      }
      if(! isLt2M) { this.$message.error('Upload image size cannot exceed 2MB! ');
      }
      return isImage && isLt2M;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemovePicture(file, fileList) {
      console.log(file, fileList);
    },
    imageChange(file, fileList, name) {
      console.log(file, fileList);
    },

 confirm(){
    this.$refs.upload.submit();
    }Copy the code
Confirm uses the upload of ref’s binding, followed by calling the submit method of the form. The VUE is already wrapped so that the parameters passed can see the file object passed by POST.









Two, upload pictures and files at the same time, and pictures can be viewed thumbnail files display into a list

But when you have a need like this, you look blind





(I) View part code 

<el-form-item prop="image" label="Picture attachment upload">
          <el-upload
            ref="uploadImage"
            :action="uploadAction"
            :beforeUpload="beforeUploadPicture"
            :on-change="imageChange"
            list-type="picture-card"
            name="files"
            :limit="3"
            multiple
            :auto-upload="false"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemovePicture">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item prop="image" label="File attachment upload">
          <el-upload
            ref="uploadFile"
            class="upload-demo"
            name="files"
            :on-change="fileChange"
            :action="uploadAction"
            :on-preview="handlePreviewFile"
            :on-remove="handleRemoveFile"
            :before-remove="beforeRemoveFile"
            multiple
            :auto-upload="false"
            :limit="3"
            :on-exceed="handleExceedFile"
            :file-list="fileList">
            <el-button size="small" type="primary"</el-button> <! --<div slot="tip" class="el-upload__tip"</div>--> </el-upload> </el-form-item> <el-button size="mini" type="primary" @click="confirm()"> determine < / el - button >Copy the code


(2) Some data 

data () {
    return { 
      selectedCategorySpe: this.selectedCategory,
      serviceForm: {
        title: ' ',
        desc: ' ',
        priority: ' ',
        occurDate: ' ',
      },
      images: {},
      files: {},
      dialogImageUrl: ' ',
      dialogVisible: false}},Copy the code


(3) Method Partial data 

beforeUploadPicture(file){
     const isImage = file.type == 'image/png' || file.type == 'image/jpg' ||  file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
      const isLt2M = file.size <  1024 * 1024 * 2;
      if(! isImage) { this.$message.error('upload only PNG, JPG, jpeg, BMP, GIF, webp! ');
      }
      if(! isLt2M) { this.$message.error('Upload image size cannot exceed 2MB! ');
      }
      return isImage && isLt2M;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemovePicture(file, fileList) {
      console.log(file, fileList);
    },
    imageChange(file, fileList, name) {
      console.log(file, fileList);
      this.imageList = fileList;
      this.images['images'] = fileList;
    },

    handleRemoveFile(file, fileList) {
      console.log(file, fileList);
    },
    handlePreviewFile(file) {
      console.log(file);
    },
    handleExceedFile(files, fileList) {
      this.$messageWarning (' Currently limited to 3 files, selected this time${files.length}Three files were selected${files.length + fileList.length}A document `); }, beforeRemoveFile(file, fileList) {return this.$confirm(' Confirm removal${ file.name }? `); }, fileChange(file,fileList) { console.log(file, fileList); this.fileList = fileList; this.files['files'] = fileList;
 },Copy the code
    confirm() {let wfForm = new FormData();
          wfForm.append( 'eventCategory',this.selectedCategorySpe.categoryId)
          wfForm.append( 'priority',this.serviceForm.priority)
          wfForm.append( 'title',this.serviceForm.title)
          wfForm.append( 'dsc',this.serviceForm.desc)
          wfForm.append( 'occurDate', enclosing serviceForm. OccurDate) Object. Entries (enclosing images). The forEach (file = > {file [0]. ForEach (item = > {/ / the following "images", Wfform.append (wfform.append (wfform.append))'images', item.raw) // wfForm.append(item.name, File [0])})}) object.entries (this.files).foreach (file => {file[0].foreach (item => {// The following "files", corresponding to the name that the backend needs to receive, Name is files wfform.append ('files', item.raw)
              //wfForm.append(item.name, file[0])
            })
          })
          createEventOrder(wfForm).then( res => {
            console.log(res, 'res')
            if(res.retValue === 1){
              this.$message.success( 'Service order created successfully' );
              this.handleClose()
            }else{}})}Copy the code
Just to clarify, this. Files is a list of files to save, and this. Images is a list of images to save. Create a new FormData object in Confirm and use the Append method to add the parameter variable to the data object and to the file object. Finally, the FormData object is passed to the back end.

A screenshot of the parameters passed is as follows:

This time, I will make a distinction between images and files, pictures and files. The backend also needs to make a judgment, and other parameters that are not needed can be selected not to upload, and new parameters need to be added, using the append method to add.


2019.07.11

According to the question mentioned in the comments

 this.files[”] = fileList;You can use an object to store that file object, so you need a name for that object, so you can use a name for that object, or you can use null. You can also change it to this:
this.files[‘files’] = fileList;The idea is that if you use a this.FileImage object for file uploads and image uploads, you can use the name of the object at the end of the formData wrapper to tell which is the file and which is the image
Object.entries(this.images).forEach FormData can be wrapped up, more in line with the high reuse, low code of the front end.

In case someone doesn’t understand this, LET me add the code:

(2) Data part of data (add a fileImage)

fileImage: {},Copy the code

(3) Modify this section in Methods

1. Change the part of picture uploading to

if(isImage && isLt2M){  
    this.imageList = fileList;  
    this.fileImage['images'] = fileList; }else{fileList. Splice (1, 1); }Copy the code

2. Change the section of file upload to

if(! isImage && isLt2M){ this.fileList = fileList; this.fileImage['files'] = fileList; }else{fileList. Splice (1, 1); }Copy the code

3. Submit the block, merge the two forEach’s into one, and take the name of the object directly as the name of formData.

Object.entries(this.fileImage).forEach(file => {      file[1].forEach(item => {    
        wfForm.append(file[0], item.raw)    
    })
})

Copy the code
And as you can see at the end, that's okCopy the code




If you have any questions, please feel free to answer them.