jquery版

效果

HTML

1 <button type="button" class="btn btn-primary  selectfile  mrb10" datatype="add">選擇檔案</button>
2 <p class="filename dib">
3     <span></span>
4     <i class="fa fa-close cp hideflag removeFile"></i>
5 </p>
6 <input id="add-file" name="fileupload" class=" mrb10" type="file" value="" multiple="multiple" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" style="display:none;"/>

 1 var formData = new FormData(),files=null;
 2 $(".selectfile").click(function(){
 3     $("#add-file").trigger('click');
 4 });
 5 //新增檔案
 6 $("#add-file").off('change').on('change',function(){

 7     $(".selectfile").button('loading');
 8     files = $(this).prop("files");
 9     var filename = files[0].name;
 

11     $(".filename span").html(filename);
12     $(".filename i").removeClass("hideflag");
13     $("#labelValue").prop("disabled",true);
14     formData.append("file",files[0]); 
15     $(".selectfile").button('reset'); 
16 });
17 //移除檔名
18 $(".removeFile").on("click",function(){
19     $(".filename span").html("");
 
20     $(".filename i").addClass("hideflag");
21     $("#add-file").val("");
22     $("#labelValue").prop("disabled",false);
23 });
24 //為了避免同一檔案不能反覆多次上傳的問題
25 //當上傳檔案是在一個彈窗裡，在關閉modal的時候，進行初始化
26 $(".selectfile").button('reset').prop("disabled",false); 
27 $("#labelValue").prop("disabled",false);
28 formData = new FormData();
29 
30 //向後臺傳送請求
31 formData = new FormData();
32 formData.append("dt_json",params.dt_json);
33 formData.append("file",files[0]); 
34 $.ajax({                                    //jquery的ajax提交
35       type: 'POST',
36       url: url,
37       async:false,
38        data: formData,                       //提交資料為表單物件
39        processData: false,                     //預設為 true，資料被處理為 URL 編碼格式。如果為 false，則阻止將傳入的資料處理為 URL 編碼的格式。
40      contentType: false,                     //指 定 請 求 內 容 的 類 型
41      success: function (response, status, xhr) {      //提交成功
42                   
43      },
44     error: function (xhr, errorText, errorStatus) {  //如果發生錯誤，返回錯誤資訊
45                 console.log(xhr, errorText, errorStatus)     
46      }
47 });

Iview版

效果

HTML

<Upload  class="dn" ref="upload" 
action="https://XXXXXXX/XX/uploadPic" :on-success="fileFn"  :max-size="10240"
            :format="['jpg','jpeg','png','gif']" :on-error="errorFn" :on-exceeded-size="oversizeFn" :on-progress="progressFn">
  <Button icon="ios-cloud-upload-outline" ref="uploadbtn">上傳圖片</Button>
</Upload>

JS(這是一個在quill編輯器中使用自定義上傳的例子，將上傳的圖片插入在游標所在位置，如果不需要這樣，直接獲取fileFn中的response中的資訊，類似於elemen-ui那種方式傳送請求就可以了)

oversizeFn(file,filelist){
     this.$Message.error('檔案過大');
     this.uploadLoading = false;
},
progressFn(){
     this.uploadLoading = true;
},
fileFn(response,file,filelist){
       let quill = this.$refs.myQuillEditor.quill;
        // 如果上傳成功
       if (response) {
              this.uploadLoading = false;
              this.imglists.push(response.rows);
             // 獲取游標所在位置
              let length = quill.getSelection().index;
              // 插入圖片，res為伺服器返回的圖片連結地址
              quill.insertEmbed(length, 'image', response.rows)
              // 調整游標到最後
              quill.setSelection(length + 1)
        } else {
              // 提示資訊，需引入Message
              this.$Message.error('圖片插入失敗')
         }
  },
errorFn(error){
      console.log(error)
},

Element-ui版

效果

HTML

<el-upload  class="upload-demo f-r" action="123"  :show-file-list="false"  title="上傳備案檔案" :http-request="uploadfile">
     <i class="iconfont icon-scbandz c-primary m-r-l-10" ref="uploadbtn"></i>
       <span class="f-t-14">安全風險評估備案</span>
</el-upload>

注意：可以直接在action上寫請求後臺的地址，也可以通過http-request，覆蓋預設的上傳行為，可以自定義上傳的實現

JS

return await request({
        url: '/business/upload_filing',
        method: 'post',
        data: query
    });
};

export default {
   data() {
      return {}
   }, 
    methods: {
         uploadfileofsec(params){
            let fd = new FormData()
            fd.append('attachment', params.file);
            fd.append('app_id',this.appId);
            fd.append('filing_type', "sec");
            this.loadsuccess(fd);
        },
        loadsuccess:async function(params){
            let info = await reqTaskRemarkUpload(params);
           if(info){
                 this.$message.success("上傳成功");
           };
        },
    }
       
    
}