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 ，也可扫码，希望能帮助到大家。