您当前的位置: 首页 > 技术文章 > 前端开发

element-ui el-upload实现上传文件以及简单的上传文件格式验证

作者: 时间:2022-11-26阅读数:人阅读

在后台管理系统中总是会用到上传文件的功能,

想实现的样式如下:(实现上传文件后,在input输入框显示文件名 )

element-ui el-upload实现上传文件以及简单的上传文件格式验证(图1)

结构代码如下:

 <el-form-item label="使用说明" class="uploadMain" prop="instruction">
              <el-input
                class="uploadInput"
                v-model="productVO.instruction"
                style="width: 75%"
                placeholder="请上传pdf格式的使用说明文件"
                :disabled="true"
              >
                <el-upload
                  slot="append"
                  class="uploadbox"
                  ref="upload"
                  name="file"
                  accept=".pdf"    //接受上传文件的格式,此处会默认打开上传时筛选.pdf格式
                  :show-file-list="false"
                  :multiple="false"  //如果想要一次选择多个文件 mulitiple为true
                  action="upload"
                  :on-change="onChange"
                  :auto-upload="false"  //自动上传,如果此处为true 选择完文件就直接上传了
                >
                  <!-- class="uploadbtn" -->
                  <el-button class="uploadbtn"></el-button>
                </el-upload>
              </el-input>
            </el-form-item>

由于上述结构代码打开上传文件时会自动筛选accept的文件格式,但是在用户选择时仍可以自己选择全部文件,所以需要前端对上传文件进行初步的格式检验

element-ui el-upload实现上传文件以及简单的上传文件格式验证(图2)

 前端部分上传文件初步检验js代码如下:

onChange(file) {
            // 校验格式
            if (['application/pdf'].indexOf(file.raw.type) == -1) {
                this.$message.error('请上传正确的pdf格式');
                return false;
            }
            this.productVO.instruction = file.name;
            this.productVO.instructionFile = file.raw; //上传文件时需要用到二进制,所以这里文件取值为file.raw
        },

上传至接口时js代码如下:

submit(){
     const formData = new FormData();
     formData.append('instruction', this.productVO.instruction);
     formData.append('instructionFile',this.productVO.instructionFile);
    

     //调用接口
     this.$post('/product/create',formData,{
         baseURL:'/',
         header:{isloading: true,'Content-Type': 'multipart/form-data'}).then()
}

此处涉及到文件的不同格式,列举一些常用的文件格式

 ".doc"

"application/msword"

".xls"

 "application/vnd.ms-excel"

".docx"

 "application/vnd.openxmlformats-officedocument.wordprocessingml.document"

".xlsx"

 "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

".jpeg"

 "image/jpeg"

".mp3"

"audio/x-mpeg"

".jpg"

 "image/jpeg"

".mp4"

"video/mp4"

".png"

 "image/png"

 ".pdf"  "application/pdf"

".ppt"

"application/vnd.ms-powerpoint"

 ".txt"

"text/plain"

".tar"

"application/x-tar"

".wps"

"application/vnd.ms-works"

".zip"

 "application/x-zip-compressed"

".xml"

 "text/plain"

附加:当上传文件为多个时,具体代码如下:

<el-form-item label="数据" class="uploadMain" prop="entity">
              <el-input
                class="uploadInput"
                v-model="productVO.entity"
                style="width: 75%"
                placeholder="请上传完整的tif/tiff/shp格式的数据文件"
                :disabled="true"
              >
                <el-upload
                  slot="append"
                  class="uploadbox"
                  ref="upload"
                  name="file"
                  accept=".tif,.tiff,.shp,.dbf,.prj,.sbn,.sbx,.shx"
                  :show-file-list="false"
                  multiple
                  :file-list="this.productVO.fileList"
                  action="upload"
                  :on-change="onChange"
                  :auto-upload="false"
                >
                  <!-- class="uploadbtn" -->
                  <el-button class="uploadbtn"></el-button>
                </el-upload>
              </el-input>
              <div style="color: #ffc230">此处是文本说明</div>
            </el-form-item>

js代码如下:

onChange(file,fileList) {
            // 校验格式
            if (['image/tiff', ''].indexOf(file4.raw.type) == -1) {
                this.$message.error('请上传正确的tif/tiff/shp格式');
                return false;
            }else{
                this.productVO.fileList=fileList
                console.log(this.productVO.fileList)
                var listName=[]
                this.productVO.fileList.forEach(function(e){listName.push(e.name)})
                var listFileRaw=[]
                this.productVO.fileList.forEach(function(e){listFileRaw.push(e.raw)})
                this.productVO.entity = listName; //文本框显示所有的文件名
                this.productVO.entityFile = listFileRaw;
            }
           
        },

接口上传文件时formData传参改动如下:

 this.productVO.entityFile.forEach(element => {
                        formData.append('entityFile', element)
                      })

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦