關於form表單中上傳文件的功能（jquery版和vue+iview 和vue+element-ui ）三種版本

jquery版  

效果

 

 

 

HTML

<button type="button" class="btn btn-primary  selectfile  mrb10" datatype="add">選擇文件</button>
<p class="filename dib">
    <span></span>
    <i class="fa fa-close cp hideflag removeFile"></i>
</p>
<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;
$(".selectfile").click(function(){
    $("#add-file").trigger('click');
});
//添加文件
$("#add-file").off('change').on('change',function(){

    $(".selectfile").button('loading');
    files = $(this).prop("files");
    var filename = files[0].name;
    $(".filename span").html(filename);
    $(".filename i").removeClass("hideflag");
    $("#labelValue").prop("disabled",true);
    formData.append("file",files[0]); 
    $(".selectfile").button('reset'); 
});
//移除文件名
$(".removeFile").on("click",function(){
    $(".filename span").html("");
    $(".filename i").addClass("hideflag");
    $("#add-file").val("");
    $("#labelValue").prop("disabled",false);
});
//為了避免同一文件不能反復多次上傳的問題
//當上傳文件是在一個彈窗里，在關閉modal的時候，進行初始化
$(".selectfile").button('reset').prop("disabled",false); 
$("#labelValue").prop("disabled",false);
formData = new FormData();

//向后台發送請求
formData = new FormData();
formData.append("dt_json",params.dt_json);
formData.append("file",files[0]); 
$.ajax({                                    //jquery的ajax提交
      type: 'POST',
      url: url,
      async:false,
       data: formData,                       //提交數據為表單對象
       processData: false,                     //默認為 true，數據被處理為 URL 編碼格式。如果為 false，則阻止將傳入的數據處理為 URL 編碼的格式。
     contentType: false,                     //指 定 請 求 內 容 的 類 型
     success: function (response, status, xhr) {      //提交成功
                  
     },
    error: function (xhr, errorText, errorStatus) {  //如果發生錯誤，返回錯誤信息
                console.log(xhr, errorText, errorStatus)     
     }
});

Iview版

效果

 

 HTML（iview中，對上傳文件限制類型時， :format="['jpg','jpeg','png','gif']"，文件不需要加 .）

<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（限制文件類型 accept=".jpg,.png,.jpeg,.svg" 需要加 .）

<el-upload class="upload-demo f-r" action="123" :show-file-list="false" title="上傳備案文件" :http-request="uploadfile" accept=".jpg,.png,.jpeg,.svg" >

　　　　<el-button size="small" type="primary" >點擊上傳</el-button>

</el-upload>

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

JS

 Element-ui版

 在bussiness.api的js中

import { request } from '@/utils/request'

export const reqTaskRemarkUpload = async(query) => {

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

 

import {reqTaskRemarkUpload} from '@/api/bussiness.api'

export default {
   data() {
      return {}
   }, 
    methods: {
         uploadfile(params){
            let fd = new FormData()
            fd.append('file', params.file);
            fd.append('id',this.Id);
            fd.append('type',"type");
            this.loadsuccess(fd);
        },
        loadsuccess:async function(params){
            let info = await reqTaskRemarkUpload(params);
           if(info){
                 this.$message.success("上傳成功");
           };
        },
    }
       
    
}
  

值得注意的是：如果上傳是在彈框中出現的，那么在需要重新打開彈框的時候，先要對原先上傳的文件列表進行一下清空，比如（編輯的時候，回顯了已有的上傳文件，在新增的時候，需要將這個文件進行刪除）