el-upload上传excel 、图片、任意文件

 <!-- 北斗信息导入 -->
      <el-dialog
          title="导入Excel"
          :visible.sync="excelDialogVisible"
          width="30%"
          center>

          <el-upload
                  ref="upload"
                  class="upload-demo"
                  :show-file-list="false"
                  action="#"
                  :multiple="false"
                  accept=".xlsx,application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                  :http-request="updateUsercomLogo"
                  :limit="1"
                  :auto-upload="false"
          >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitUpload">保  存</el-button>
            <el-button  @click="excelDialogVisible = false">取消</el-button>
          </span>

      </el-dialog>

  // 导入表格
    updateUsercomLogo({file}) {
      let vm=this;
      const formdata = new FormData();
      formdata.append("excel", file);

      vm.$source.post('/Gpsno/importData', formdata).then( res => {
          console.log(res);
          if(res.body.code == 200) {
              vm.$notify({
                  title: '成功',
                  message: '导入成功！',
                  type: 'success'
              });

              vm.getList();
          }else{
              vm.$notify({
                  title: '警告',
                  message: '导入失败！',
                  type: 'warning'
              });
          }
      })
      vm.excelDialogVisible=false;
    },

图片

  <el-form-item label="上传文件:" prop="desc">
          <el-upload
                ref="upload"
                class="avatar-uploader"
                :show-file-list="false"
                action="#"
                :multiple="false"
                :data={type:2} //传值
                :http-request="updateUsercomLogo"
              >
                <img v-if="insuranceInfo.insure_form" :src="insuranceInfo.insure_form" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
        </el-form-item>
     //    图片上传
      updateUsercomLogo(params) {
        let file = params.file
        let vm = this;
        const formdata = new FormData();
        formdata.append("filename", file);
        formdata.append("token", JSON.parse(localStorage.getItem("userInfo")).token);
        vm.$source.post('/Uploadfile/uploadpic', formdata).then(res => {
          if (res.data.code == 200) {
            let imgUrl = res.data.result.file_url
            let type=params.data.type //获取传的值
            if (type==0){
              vm.insuranceInfo.car_pic = process.env.VUE_APP_baseUrl + imgUrl;
            }else if (type==1){
              vm.insuranceInfo.ship_pic = process.env.VUE_APP_baseUrl + imgUrl;
            }else{
              vm.insuranceInfo.insure_form = process.env.VUE_APP_baseUrl + imgUrl;
            }
            vm.$notify({
              title: '成功',
              message: '上传图片成功！',
              type: 'success'
            });
          } else {
            vm.$notify({
              title: '警告',
              message: '上传图片失败！',
              type: 'warning'
            });
          }
        })

      },

手动上传

 <el-upload
        ref="upload"
        class="upload-demo"
        action="#"
        :multiple="false"
        accept=".xlsx,application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :http-request="updateUsercomLogo"
        :limit="1"
        :auto-upload="false"  //添加这行代码
      >
     <el-button type="primary" @click="submitUpload">保  存</el-button>
     submitUpload() {
        this.$refs.upload.submit();
      }

上传任意文件

  <el-upload
              ref="upload"
              class="upload-demo"
              action="#"
              :multiple="false"
              :http-request="updateUsercomLogo"
              :before-upload="beforeAvatarUpload"
              :limit="1"
              :file-list="fileList"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <div slot="tip" style="color:red" class="el-upload__tip">文件小于20M</div>
            </el-upload>
            <el-button type="primary" @click="submitUpload">开始上传</el-button>

  fileList: [],


 //限制上传小于20m
      beforeAvatarUpload: function (file) {
        console.log(file.size);
        //限制图片格式为jpg / png
        const isLt20M = file.size / 1024 / 1024 < 20;                         //限制图片大小

        if (!isLt20M) {
          this.$message({
            type: 'info',
            message: '文件大小不能超过 20MB!'
          });
        }
        return isLt20M
      }


  updateUsercomLogo({file}) {
        let vm = this;
        const formdata = new FormData();
        formdata.append("filename", file);
        formdata.append("token", JSON.parse(localStorage.getItem("userInfo")).token);
        vm.$source.post('/Uploadfile/uploadpic', formdata).then(res => {

          vm.insure_form = res.data.result.file_url
        })

      },
   submitUpload() {
        const vm = this
        const params = {
          id: vm.recordId,
          insure_form: vm.insure_form,
          token: JSON.parse(localStorage.getItem("userInfo")).token,
        }
        vm.$source.post('/Insure/uploadInsureForm', params).then(res => {
          if (res.data.code == 200) {
            vm.$notify({
              title: '成功',
              message: '上传成功！',
              type: 'success'
            });
            vm.searchListOrder();
          } else {
            vm.$notify({
              title: '警告',
              message: '上传失败！',
              type: 'warning'
            });
          }
        })
        vm.excelDialogVisible = false;
      },