Vueはファイルのアップロードとダウンロードを実装します

<el-dialog :title="addName" :visible.sync="dialogAddFile" width="500px" style="padding:0;" @close="resetAdd">
               添付ファイル名: <el-input v-model="addFileName" autocomplete="off" size="small" style="width: 300px;" ></el-input>
                <div class="add-file-right" style="height:70px;margin-left:100px;margin-top:15px;">
                    <div class="add-file-right-img" style="margin-left:70px;">ファイルをアップロード:</div>
                    <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".docx,.doc,.pdf">
                    <span class="add-file-right-more">サポートされている拡張子: .doc .docx .pdf </span>
                </div>
                <div class="ファイルリストを追加">
                    <ul>
                        <li v-for="(item, index) in addArr" :key="index"><a >{{item.name}}</a></li>
                    </ul>
                </div>
                <div スロット="フッター" クラス="ダイアログ フッター">
                    <el-button type="primary" @click="submitAddFile" size="small">アップロードを開始</el-button>
                    <el-button @click="resetAdd" size="small">すべて削除</el-button>
               </div>
</el-ダイアログ>

getFile(イベント){
           var ファイル = event.target.files;
           for(var i = 0;i<file.length;i++){
            // アップロード種別判定 var imgName = file[i].name;
                var idx = imgName.lastIndexOf(".");  
                (idx != -1)の場合{
                    var ext = imgName.substr(idx+1).toUpperCase();   
                    ext = ext.toLowerCase(); 
                     ext!='pdf' && ext!='doc' && ext!='docx' の場合{
                       
                    }それ以外{
                          this.addArr.push(ファイル[i]);
                    }   
                }それ以外{
 
                }
           }
       },

ファイルの追加を送信します（）{
           if(0 == this.addArr.length){
             this.$メッセージ({
               タイプ: '情報'、
               メッセージ: 「アップロードするファイルを選択してください」
             });
             戻る;
           }
 
            var フォームデータ = 新しいフォームデータ();
            フォームデータを追加します。
            フォームデータを追加します。
            formData.append('rfilename',this.addFileName);
            for(var i=0;i<this.addArr.length;i++){
                formData.append('fileUpload',this.addArr[i]);
            }
          設定 = {
            ヘッダー: {
              'コンテンツタイプ': 'multipart/form-data',
              「認証」: this.token
            }
          };
          this.axios.post(apidate.uploadEnclosure、formData、config) は、
            .then((応答) => {
                if(response.data.info=="成功"){this.$message({
                        タイプ: '成功'、
                        メッセージ: '添付ファイルが正常にアップロードされました!'
                    });
                }
            })
        }

<div class="ファイルについて">
    <div class="about-file-title">関連資料</div>
    <ul>
        <li v-for="(item, index) in tenEnclosure.rows" :key="index">
              <a target="_self" >{{item.tenPencSourname}}</a>
              <span @click="toxiazai(index,4,item.tenureId)" title="ダウンロード"></span>
              <span @click="toshanchu(index,4,item.tenureId)" title="削除"></span>
       </li>
   </ul>
</div>

toxiazai(インデックス,数値,ID){
          var tempForm = document.createElement("form"); //フォームを作成し、フォームのさまざまなパラメータに従います tempForm.id = "tempForm1";
          tempForm.method = "post";
          tempForm.action = apidate.downloadEnclosure;
          tempForm.target="_";
          var hideInput1 = document.createElement("入力");
          入力1を非表示にします。属性を設定します('type','hidden');
          入力1を非表示にします。属性を設定します('名前','linkId');
          入力1を非表示にします。属性を設定します('id','linkId');
          入力1を非表示にします。属性を設定します('値'、id);
          tempForm.appendChild(入力1を非表示);
 
          var hideInput2 = document.createElement("入力");
          入力属性を非表示にします。
          入力2を非表示にします。属性を設定します('名前','数値');
          入力2を非表示にします。属性を設定します('id','num');
          入力2を非表示にします。属性を設定します('値',数値);
          tempForm.appendChild(入力2を非表示);
 
 
          if(ドキュメント.all){
            tempForm.attachEvent("onsubmit",function(){}); //IE
          }それ以外{
            var subObj = tempForm.addEventListener("submit",function(){},false); //Firefox
          }
          document.body.appendChild(tempForm);
          if(ドキュメント.all){
            tempForm.fireEvent("onsubmit");
          }それ以外{
            tempForm.dispatchEvent(新しいイベント("送信"));
          }
          tempForm.submit();//POST リクエストを送信document.body.removeChild(tempForm);
},

<ul>
     <li v-for="(item,index) in noticeList" v-bind:key="index" class="person-list" @click="notice(index)">
          <div class="人リスト名">
              <a v-bind:href="[filePrefix+item.uuid_name]" rel="external nofollow" rel="external nofollow" >{{item.file_name}}</a>
         </div>
         <div class="person-list-time">アップロード時間: {{item.create_time}}</div>
     </li>
</ul>

<div class="list-img">
                <ul>
                    <li v-for="(item,index) in imgArr" :key="index">
                        <img :src="item.path" alt="" >
                        <a @click="todel(インデックス)"></a>
                    </li>
           <li>
            <div class="addImg" v-if="imgArr.length<3">
                  <span class="add">写真をアップロード</span>
                  <span class="add">（写真を3枚までアップロードしてください）</span>
                  <input type="file" @change="getFile($event)" accept=".jpg,.png,.bmp,.gif">
             </div>
         </li>
     </ul>
</div>

getFile(イベント){
            var ファイル = event.target.files;
            for(var i = 0;i<file.length;i++){
               // アップロード種別判定 var imgName = file[i].name;
                var idx = imgName.lastIndexOf(".");  
                (idx != -1)の場合{
                    var ext = imgName.substr(idx+1).toUpperCase();   
                    ext = ext.toLowerCase(); 
                    ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif' の場合{
                        
                    }それ以外{
                            this.imgArr.push(ファイル[i]);
                    }   
                }それ以外{
 
                }
            }
        },

getFile(イベント){
            var ファイル = event.target.files;
            that = this とする;
            for(var i = 0;i<file.length;i++){
               // アップロード種別判定 var imgName = file[i].name;
                var idx = imgName.lastIndexOf(".");  
                (idx != -1)の場合{
                    var ext = imgName.substr(idx+1).toUpperCase();   
                    ext = ext.toLowerCase(); 
                    ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif' の場合{
                        
                    }それ以外{
                            that.imgArr.push(ファイル[i]);
                    }   
                }それ以外{
 
                }
                //アップロードされた写真を表示する let reader = new FileReader()
                reader.readAsDataURL(ファイル[i])
                reader.onload = 関数(e) {
                    that.imgShow.push(this.result);
                }
            }
        },