vue + element-ui 跨域拖拽上传文件

element-ui里面的默认拖拽上传组件

<el-upload
  class="upload-demo"
  drag
  action="#"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

在这里面action对应的上传的接口， 但是在前后端分离开发的过程中一般都是存在跨域的，所以我们就不用这个action进行上传操作。

我们使用http-request来进行上传操作

以上传图片为例：

<el-upload
  class="upload-demo"
  drag
  action="#"
  :http-request="uploadImage"
  :before-upload="beforeUpload"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2M</div>
</el-upload>


//上传文件
async uploadImage(params){
    // 一般上传文件使用的是formdata格式 我们需要使用formdata进行传参
    const formdata = new FormData()
    formdata.append("file",params.file)
    const res = await uploadFile(formdata)
    if (res.success) {
        
    }

}

// 文件上传前的钩子函数 可以对文件类型大小进行筛选
beforeUpload(file){
    // 只能上传jpg和png的图片
    const isImage = file.type==="image/jpg"||file.type==="image/png"
    // 大小限制为2M    
    const isLt2M = file.size/1024/1024 <= 2

    if(!isImage){
        this.$message.error("图片格式错误！")
    }
    if(!isLt2M ){
        this.$message.error("图片大小错误！")
    }
    return isImage && isLt2M 
}

请求就可以使用正常的跨域写法了

// request 是二次封装的跨区axios
export const uploadFile = (params) => request.post("/url/url/url", params)