vue+el-upload实现文件上传:
项目中遇到过需要文件上传的情况,在此简单举例单文件上传方法。
步骤:
首先了解element中的el-upload组件,本次代码选择在选取文件后自动上传的方式。
1、 搭建文件上传组件
 (accept=".xlsx, .xls"限制了只能选择excel文件)
 ( :http-request="uploadHttpRequest"是自定义上传方法)
 ( :limit="1"限制选择一个文件)
 (:on-remove="handleRemove"文件列表移除文件时方法)
<el-uploadref="uploadplan"class="upload-demo"action=""accept=".xlsx, .xls":on-remove="handleRemove":http-request="uploadHttpRequest":limit="1":file-list="fileList"><el-buttontype="primary"size="small">
                上传</el-button></el-upload>2、 在data中声明文件上传列表
data(){return{
      fileList:[],//上传的文件列表}}3、 自定义上传方法
 ------------------注意看代码后的注释------------------
 methods:{//自定义上传方法uploadHttpRequest(param){
      console.log(param.file);//查看是否选取到文件let formData=newFormData();//FormData对象,添加参数只能通过append('key', value)的形式添加
      formData.append("id",this.tid);//添加id(这里是项目需要,根据个人情况选择是否添加)
      formData.append("xxxFile", param.file);//添加文件对象this.$axios.post("这里写接口地址",formData,{
           headers:{"Content-Type":"multipart/form-data",//配置header,我们上传的文件编码格式就是multipart/form-data},}).then((res)=>{
          console.log(res)})},//  文件列表移除文件时的钩子handleRemove(file, fileList){this.$message.warning("文件已移除");},}如有不足欢迎指出,本人也是自己瞎摸索出来







