Vue Upload file: Upload implementation in Elementui

First, upload file implementation

Two ways to achieve this:

1. Direct Action

<el-Uploadclass="Upload-file"drag:action="Doupload":d ATA="PPPSS"> <iclass="El-icon-upload"></i> <divclass="El-upload__text"> Drag the file here, or <em> click Upload </em></div></el-upload>

: Action, required parameter, uploaded address, string type. Data () requires proxy forwarding, or there is a cross-domain problem

:d ATA, additional parameters that are included with the upload, object type. Used to pass other parameters that need to be carried, such as the following Srid

data () {    return  {        , doupload:'/api/up/file'         , pppss:{            srid:'}}    ,

2. Using the before-upload attribute

There is a disadvantage of this approach, that is, action is required parameter, then action if and post URL consistent, always request 2 times, so generally put action casually write a URL, although does not affect the final effect, but this will be in the console there are 404 errors reported

<el-Uploadclass="Upload-file"drag:action="Doupload": Before-upload="Beforeupload"  ref="Newupload"Multiple:auto-upload="false"> <iclass="El-icon-upload"></i> <divclass="El-upload__text"> Drag the file here, or <em> click Upload </em></div></el-upload>

beforeupload (file) {Let FD=NewFormData (); Fd.append ('file', file);//Transfer FilesFd.append ('Srid', This. Aqform.srid);//Pass Other parametersAxios.post ('/api/up/file', FD). Then (function (res) {alert ('Success'); })},newsubmitform () {//Confirm Upload     This. $refs. Newupload.submit ();}

Ii. Introduction of common methods

1, dynamic change action address

　　actionis a required parameter, and its type is string , we write action :action , and then followed by a method name, call method, return to the address you want to implement dynamic to modify the upload address

//HTML code<el-upload:action="Uploadurl ()": on-success="uploadsuccess": file-list="fileList"> <el-button size="Small"Type="Primary"> Click Upload </el-button></el-upload>//JS Code writes the method that needs to be called in the methodsmethods:{uploadurl:function () {return "return the address you need to upload"; }   }   

2, before the file upload to do type size and other restrictions

(1) One way is to add Accpet Property

<el-upload Class="upload-demo" : multiple="true" : action="action" accept="image/jpeg,image/gif,image/png,image /bmp" 
: file-list="fileList" : before-upload="beforeavatarupload" : on-success="handleavatarsuccess">

(2) Another way is to judge the trigger function before uploading

beforeavatarupload (file) {Constisjpg = File.type = = ='Image/jpeg'; ConstIsgif = File.type = = ='Image/gif'; ConstIspng = File.type = = ='Image/png'; ConstIsbmp = File.type = = ='image/bmp'; ConstISLT2M = file.size/1024x768/1024x768<2; if(!isjpg &&!isgif &&!ispng &&!)isbmp) {         This. Common.errortip ('upload image must be in jpg/gif/png/bmp format!'); }    if(!islt2m) {         This. Common.errortip ('upload image size cannot exceed 2mb!'); }    return(isjpg | | isbmp | | isgif | | ispng) &&islt2m;},

3, at the same time pass form form and have multiple upload file How to pass ?

Newsubmitform () { This. $refs ['NewForm'].validate ((valid) = {    if(valid) {//the data for the form       This. Uploadform.append ('Expname', This. Newform.expname) This. Uploadform.append ('EXPSN', This. Newform.expsn) This. Uploadform.append ('groupId', This. Newgroupid) This. Uploadform.append ('Subgroupid', This. Newsubgroupid) This. Uploadform.append ('expvmdifficulty', This. Newform.expvmdifficulty) Newexp ( This. uploadform). Then (res = {        if(Res.code = = = -) {           This. $message. Error (Res.error)}Else if(Res.code = = = $) {           This. $message. Success ('Upload Success! ')                }      })       This. $refs. Uploadhtml.submit ()//before-upload function that triggers each upload component separately at commit       This. $refs. Uploadfile.submit () This. $refs. Uploadvideo.submit ()}Else{Console.log ('Error submit!!')      return false}})},newhtml (file) {//Before-upload   This. Uploadform.append ('HTML', file)return false},newfiles (file) { This. Uploadform.append ('file[]', file)return false},newvideo (file) { This. Uploadform.append ('Video', file)return false}

Export function Newexp (data) {  return  Axios ({    'post' ,  //  mode must be post    ' your backend receive function path ',     20000 ,    data:data        //  parameters need to be a single formdata form   })}

Note: (1) for multiple upload components, the need to trigger separately, to give Formdata append data

(2) receiving multiple files must be in the form of an array of file[],this.uploadForm.append (' file[] ', file)

4. How to pass files and other parameters

As in the first section, if you do not use the action to implement the upload, the use of the Before-upload property can also achieve the effect of uploading.

　　Before-upload Property , which is a function type property, the default parameter is the current file, as long as you can pass this file can also achieve effect

To pass this method, a new Formdata object is required, and the object is appended with the key and value, similar to the Postman test.

Also note: Delivery formdata and data can not be passed together, to pass Formdata can not have data, so for other parameters of the delivery, but also to

Beforeupload (file,id) {    new  FormData ()    fd.append ('file'  , file)    fd.append ('ID', id)// other parameters     axios.post (URL, fd, {             })},

Instead of using this formdata and data mode.

Beforeupload (file,id) {        new  FormData ()        fd.append ('key'  , file, FileName)        axios.post (URL, fd,{          data:{           id:id          },          headers: {             'content-type'multipart/form-data'          }        })     },

Vue Upload file: Upload implementation in Elementui