vue+ElementUI附件上传

Element官方插件Upload 上传,详情看官方文档,具体实现如下:

<el-upload 
        style="" 
        action="URL/controller"
        :data="fileUploadParam" 
        list-type="picture-card" 
        :on-preview="handlePictureCardPreview"
        :on-success="handleSuccessss"
        :file-list="fileList"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
</el-upload>

几个重要的参数:

on-preview：图片的话点击可做放大操作,附件的话点击可做下载操作（对上传过的附件下载挺有用的）。

on-success：上传成功返回参数。

file-list：列表里面放的是附件name和url（对多附件非常重要，name和url我是在后端封装的，返回的josn对象名一定要是name和url）。

on-remove：移除附件参数。

上面的那些参数，我理解也就是事件吧

<script>
  import Navigation from '@/components/Navigation';
  import '@/assets/icon/iconfont.css';
  import mixin from "./mixin.js";
  export default {
    mixins: [mixin],
    components: {
      Navigation,
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileUploadParam: {
          creditCode: '9527001001',
          token: null
        },
        fileList:[],
      };
    },
    mounted() {
      this.getkmyeb()
      .then(resp => {
        console.log(resp);
      })
      .catch(error => {
        console.log(error);
      });
    },
    methods: {
        getkmyeb() {
          return new Promise((resolve, reject) =>{
            this.$http({
              url:'/listKmyebData',
              method: "post",
              data:{
                creditCode:'9527001001',  //this.$store.state.creditCode
                token:null  //this.$store.state.token,
              }
            }).then(response =>{
              if (response.data.resultCode == "0") {
                this.fileList  = response.data.resultData.dataList;
              }else{
                // this.$message({message: response.data.resultMsg, type: "warning"});
              }
            });
          });
      },

      //删除
      saveKmyeb(id) {
          return new Promise((resolve, reject) =>{
            this.$http({
              url:'/kmyebDelete',
              method: "post",
              data:{
                creditCode:'9527001001',  //this.$store.state.creditCode
                token:null,  //this.$store.state.token,
                id:id
              }
            }).then(response =>{
              if (response.data.resultCode == "0") {
                this.getkmyeb();
              }else{
                this.getkmyeb();
              }
            });
          });
      },
      //删除文件
      handleRemove(file, fileList) {
        var id = file.name;
        this.saveKmyeb(id);
      },
      //点击放大文件/下载
      handlePictureCardPreview(res,file) {
        window.open(res.url);
      },
      //上传成功返回值
      handleSuccessss(res,file, fileList) {
        this.getkmyeb();
      },
      handleProgess() {
        // console.log(arguments)
      },
    }
  }

</script>

官网有很多上传附件的插件，具体使用哪一个可自己选择。

重要的是官网上几个参数会用才行。