Element-ui上传文件（删除、添加、预览）

先看下效果是不是你所需要的。。。。

上传文件进度条后续会加上的。。。。

功能需求：默认为上传状态

　　　　　　1、未上传：点击可上传文件

　　　　　　2、已上传：点击可上传文件

　　　　　　　　 （1）、鼠标移入【删除】

　　　　　　　　 （2）、鼠标点击【预览】

然后废话不多说，直接上代码啦，希望能够帮助到你

<template>
    <div class=''>
        <ul class="contract_list">
            <li v-for="(item,index) in items" :key="item.index">
                <div class="add_contract" v-if="item.contractTempletPath==''" title="点击可添加合同">
                  <el-upload
                      class="upload-demo"
                      ref="upload"
                      :http-request="httpRequest"
                      :show-file-list="false"
                      :before-upload="beforeAvatarUpload"
                      :data="{'id':item.id}"
                      action="/clapi/materiel/mealContractTempletRela/uploadContractTemplet"
                      :limit="1"
                      :auto-upload="true">
                        <div class="add_contract" slot="trigger">
                          <div class="contract_box">
                            <p class="el-icon-plus add_icon"></p>
                            <p>上传{{item.contractTempletName}}</p>
                          </div>
                      </div>
                  </el-upload>
                </div>
                <!--上传文件之后可删除-->
                  <div class="" v-else>
                      <div class="add_contract">
                          <span @click="del(item)" title="点击可删除">删除</span>
                          <div class="adreementImg" @click="preview(item)" v-if="item.contractTempletName=='设计合同模板'">
　　　　　　　　　　　　　　　　　　  <img title="点击可预览" src="./../images/1.png">
　　　　　　　　　　　　　　　　　  </div>
                          <div class="adreementImg" @click="preview(item)" v-if="item.contractTempletName=='意向合同模板'">
　　　　　　　　　　　　　　　　　　    <img title="点击可预览" src="./../images/2.png">
　　　　　　　　　　　　　　　　　  </div>
                          <div class="adreementImg" @click="preview(item)" v-if="item.contractTempletName=='正式合同模板'">
　　　　　　　　　　　　　　　　　　   <img title="点击可预览" src="./../images/3.png">
　　　　　　　　　　　　　　　　　  </div>
                      </div>
                </div>
                <p class="contract_text">{{item.contractTempletName}}</p>
            </li>
              <!--上传文件之后可预览-->
              <el-dialog width="50%"
              :visible.sync="dialogVisible"
              :title="previewName">
              <iframe :src='previewUrl' width='100%' height='100%' frameborder='1' style="height: 540px;"></iframe>
            </el-dialog>  
          </ul>  
    </div>
</template>
    
<script>
export default {
    props: {
        message: Object
    },
    data() {
        return {
            mealId:"",
            previewUrl:"",
            previewName:"",
            dialogVisible: false,
            videoFlag:false,
            items:[],
            fileData:"",
            fileName:"",
            id:""
        }
    },
    methods: {
      // 点击预览
      preview(val){
        this.dialogVisible=true;
        this.previewUrl = val.contractTempletPath;
        this.previewName = val.contractTempletName;
      },

      // 判断上传文件大小不能超过50M
        beforeAvatarUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 50
        if(!isLt2M) {
            this.$message({
                message: '上传文件大小不能超过 50MB!',
                type: 'warning'
            });
            return false;
        }
    },
    // 点击删除
      del(val){
            this.$confirm("确认要删除"+val.contractTempletName+"吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
                this.$axios.post('修改为删除接口地址',{
                  id:val.id
                  })
                  .then((response) => {
                   this.$message({
                      type: "success",
                      message: "删除"+val.contractTempletName+"成功!"
                      });
                    this.templetManage();
                  })
                  .catch((error) => {

                });
            })
            .catch(() => {

            });
      },
  // 转换base64格式
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },
    httpRequest (options) {
        this.fileName = options.file.name;
        this.id = options.data.id;
        this.getBase64(options.file).then(res => {
            this.fileData = res.split(',')[1];
            this.$axios.post('修改为你的上传接口地址',{
                fileData:this.fileData,
                fileName:this.fileName,
                id:this.id
              })
          .then((response) => {
            this.$message({
              type: "success",
              message: "上传成功!"
            });
            this.templetManage();
          })
          .catch((error) => {
            console.log(error);
          });

        });
    },
    templetManage(){
        this.$axios.get('查询接口数据地址?mealId='+this.mealId)
          .then((response) => {
            var data = response.data.result
            this.items = data;
            for(var i=0;i<data.length;i++){
              if(data[i].contractTempletPath){
                this.items[i].contractTempletPath="http://crm.bc100.com:8012/onlinePreview?url=" + encodeURI(data[i].contractTempletPath);
              }
            }
          })
          .catch((error) => {
            this.$message({
              type: "warning",
              message: error.response.data.result
            });
          });
      }
    },
    created() {
       this.mealId = this.message.id;
       this.templetManage();
    },
}
</script>
    
<style scoped>
.adreementImg,.adreementImg img{
   height: 300px;
   width: 220px;
}

.contract_box {
  color: #0099ff;
  font-size: 14px;
}
.contract_list {
  text-align: center;
  display: flex;
  margin: 50px auto;
  width: 100%;
}
.contract_list li {
  margin-left: 80px;
}
.contract_text {
  font-size: 14px;
  margin-top: 10px;
}
.add_contract {
  height: 300px;
  cursor: pointer;
  width: 220px;
  display: flex;
  background: #f7f7f7;
  border: 1px solid #c4c4c4;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.add_contract span {
  width: 100%;
  z-index: 1111;
  position: absolute;
  bottom: 0;
  padding: 6px;
  background: #000;
  opacity: 0.7;
  color: #fff;
  display: none;
}
.contract_list li .add_contract:hover span {
  display: block;
}
.add_icon {
  font-size: 40px;
  margin-bottom: 20px;
}
</style>

若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。