关于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("上传成功");
           };
        },
    }
       
    
}
  

值得注意的是：如果上传是在弹框中出现的，那么在需要重新打开弹框的时候，先要对原先上传的文件列表进行一下清空，比如（编辑的时候，回显了已有的上传文件，在新增的时候，需要将这个文件进行删除）