vue 使用 el-upload 上傳文件(自動上傳/手動上傳)文章來源地址http://www.zghlxwxcb.cn/news/detail-640548.html

1. 自動上傳(選擇完文件后,調(diào)用axios上傳)

<el-upload
  ref="upload1"
  action
  :multiple="false"
  accept=".xlsx,.csv,.xls"
  :auto-upload="false"
  :on-change="handleFileChange"
  :show-file-list="false"
>
  <el-button type="success" icon="el-icon-upload2">導(dǎo)入</el-button>
</el-upload>

• 上傳

 // 當(dāng)開啟多選時 filelist有值
 async handleFileChange(file, filelist) {
  this.httpImportFile(file.raw);
},
httpImportFile(file) {
  let formDatas = new FormData();
  formDatas.append("file", file);
  apiImport(formDatas).then((res) => {
      this.$message.success("導(dǎo)入成功");
      this.$refs.upload1.clearFiles();
    }).catch((err) => {});
},

2.手動上傳

<el-upload 
    ref="upfile"
    :auto-upload="false"
    :on-change="handleChange"
    :file-list="fileList"
    :multiple="true"
    accept=".xlsx,.csv,.xls"
    action="#">
    <el-button  type="success">選擇文件</el-button>
</el-upload>

<el-button  type="success" @click="upload">點擊上傳</el-button>

• 上傳

export default {
    data(){
        return{
            fileList:[]
        }
    },
    methods:{
        //獲得文件列表
         handleChange(file, fileList) {
            this.fileList = fileList;
        },
        upload(){
            let fd = new FormData();
            this.fileList.forEach(item=>{
                //文件信息中raw才是真的文件
                fd.append("files",item.raw);
            })
            apiImport(fd).then(res=>{
                if (res.code === 200) {
                    this.$message('上傳成功')
                }else{
                    this.$message('失敗')
                }
            })
        },
    }
}

到了這里，關(guān)于vue 使用 el-upload 上傳文件(自動上傳/手動上傳)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！