vue文件上传功能bootstrap框架

最新推荐文章于 2024-10-10 10:21:13 发布

tamia_nice

最新推荐文章于 2024-10-10 10:21:13 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_47144417/article/details/115717707

版权

vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

vue文件上传功能bootstrap框架

封装公共组件components/fileupload/FileUpload.vue 内容如下：

公共组件


```html
<template>
    <div component_name="FileUpload" :component_id="id">
        <div class="input-group">
            <input v-model="input_file_name" style="height: 30px" class="form-control">
            <label class="input-group-btn" :refid="refId">
                <input type="button" @click="showUploadWindow" style="height: 31px" value="浏览文件" class="btn btn-primary">
                <input type="file" :ref="refId" @change="selectedFile" style="display: none">
            </label>
        </div>
        <div class="error_validate_msg" v-if="file_input_err_msg!=null && file_input_err_msg!=undefined"><em>{{file_input_err_msg}}</em></div>
    </div>
</template>
<script>
    /**
     * 组件名称：文件上传组件
     * 特性
     *  1、注意此组件不提供v-model操作，因为此组件通常不可直接参与表单提交
     *  2、必须为该组件设置唯一ID
     */
    export default {
        name:"FileUpload",
        props:{
            accept:{
                type:Array,
                required:false
            },
            limitSize:{//单位:字节
                type:Number,
                required:false
            },
            id:{//组件唯一ID
                type:String,
                default:null
            }
        },
        data:function(){
            return {
                input_file_name:'',
                refId:null,
                file_input_err_msg:null
            }
        },
        created:function(){
            if(!this.id){
                alert('!ERROR:必须为FileUpload组件设置唯一ID');
            }
            this.refId = 'ref_file_fileupload'+this.id;
        },
        mounted:function(){
            
        },
        methods:{
            selectedFile:function(){
                this.file_input_err_msg = null;
                let file = this.$refs[this.refId].files[0];
                this.input_file_name = file.name;
                //判定文件的后缀
                if(this.accept){
                    let index = this.input_file_name.lastIndexOf(".");
                    let suffix = this.input_file_name.substring(index+1);
                    let check = this.accept.filter(x=>x.toLowerCase() == suffix.toLowerCase());
                    if(!check || check.length == 0){
                        this.file_input_err_msg = '文件格式错误,不支持的文件扩展名:'+suffix;
                        return;
                    }
                }
                //判定文件的大小
                if(this.limitSize){
                    if(file.size>this.limitSize){
                        this.file_input_err_msg = '文件大小超过限制';
                        return;
                    }
                }
                this.$emit('fileselected',file);
            },
            showUploadWindow:function(){
                this.$refs[this.refId].dispatchEvent(new MouseEvent('click'));
            },
			clear:function(){
				this.$refs[this.refId].value = '';
				this.input_file_name = null;
				this.file_input_err_msg = null;
			}
        }
    }
</script>

用法
页面标签

<file-upload
  v-model="model.pxfa"
  name="pxfa"
  v-validate="{ required: true }"
  data-vv-as="整体方案"
  id="zypx_zcxx_bt_imp_fp"
  :accept="['doc', 'docx']"
  @fileselected="fileselected"
></file-upload>

script中的方法通过formdata发送请求然后获取一段url地址

    fileselected: function(file) {
      let formdata = new FormData();
      formdata.append("file", file);
      this.$http
        .post("/htgl/biz/myNeeds/upload", formdata, {
          "Content-Type": "multipart/form-data",
        })
        .then((res) => {
          if (res.data) {
            this.model.pxfa = res.data.url;
          }
        });
    },