Recently do a background system with a summary of the function of the problem met

Functional requirement point

  • Upload select a file Determine the file format
  • Save the file to be uploaded and display the file name
  • Delete files (before uploading)
  • Upload a file

Upload component provided by iView

<Upload
    multiple
    ref="upload"
    :before-upload="handleUpload"
    :show-upload-list="false"
    :on-success="uploadSuccess"
    action="//jsonplaceholder.typicode.com/posts/">
    <Button type="ghost" icon="ios-cloud-upload-outline"<div v-for= </Button> </Upload"(item, index) in file">Upload file: {{ item.name }} 
    <a href="javascript:;"  @click="delectFile(item.name)">X</a>
    <Button style="margin-left:30px;"
        size="small"
        v-if="index === 0"! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/3/14/16223a8c12c38be9~tplv-t2oaga2asx-image.image )type="primary"
        @click="upload"
        :loading="loadingStatus"</Button> </div>Copy the code

API parameters/methods used

  • Multiple: whether multiple files are supported The default value is false
  • Before-upload: An event hook before uploading a file that stops automatic uploading if false or Promise is returned
  • Show-upload-list: indicates whether to display the list of uploaded files. The default value is true
  • On-success: event hook for successful file upload, return res(information returned by interface side), file(upload file), fileList(upload fileList)
  • Action: indicates the file upload address

Upload select a file Determine the file format save the file

After selecting the file, the method will be called, which will determine whether the file type meets the requirements. If so, it will be saved to the List of files that need to be uploaded. Here, we need to define a keyID ourselves, because manual uploading needs to display and delete functions, if there is no unique ID, we do not know which one to delete

This hook will call the hook event handleUpload before the upload event as if it were an array of selected files, so it doesn’t need to call the hook event handleUpload before the upload event

HandleUpload (file) {// The event hook before uploading the file // After selecting the file here to determine the file type save the file to define a keyID value for later delete operationlet keyID = Math.random().toString().substr(2);
    file['keyID'] = keyID; // Save the file to the general display file data this.file.push(file); This.uploadfile.push (file) // Return falsa stop automatic upload we need manual uploadreturn false;
}
Copy the code

Delete function

DelectFile (keyID) {// Delete file // delete the current file in the display file this.file = this.file.filter(item => {return item.name != name
    })
    // 删除需要上传文件数据里的当前文件
    this.uploadFile = this.uploadFile.filter(item => {
        returnitem.KeyID ! = keyID }) }Copy the code

Upload a file

 upload() {// Upload the filefor (let i = 0; i < this.uploadFile.length; i++) {
        let item = this.file[i]
        this.$refs.upload.post(item); }},Copy the code

If here is more file need to upload one by one, if an upload multiple component complains, support only upload one file at a time, hope the iView will support an upload multiple, this manual upload has been didn’t find, don’t know how to manually upload call event, find a function for half a day, also not to write in the official documentation, Official to there is an example of manual upload but:

There is no actual upload operation and this is just a simulation. The upload method is found in the source code

After uploading successfully

Because our file uploading function is separate from the data of submitting the whole page, we need to verify whether the selected file is uploaded when submitting data. In the upload success event callback, let the background send back the data we passed to clear the data in the array of files to be uploaded (note: it is mainly to get the keyID of the file to be deleted). When submitting data, only need to determine whether the array of files to be uploaded is empty

The file callback returns three parameters

  • Res Upload result Indicates the IP address after the upload
  • File Indicates the uploaded file
  • FileList File Specifies the array data to be uploaded
uploadSuccess (res, File,fileList) {console.log(response) console.log(file) console.log(fileList)},Copy the code

When there’s a small problem, should be uploaded is call to upload, if multiple file upload there will be multiple correction results cannot be prompt the user a file once, so need to deal with the custom here a number every time on the treatment of callback back on duty and be uploaded file length equal to suggest upload results

Detailed code address