快捷導(dǎo)航

element-ui?el-upload實(shí)現(xiàn)上傳文件及簡單的上傳文件格式驗(yàn)證功能

更新時(shí)間：2022年11月12日 16:07:29 作者：PinkM∞n7

前端上傳文件后,后端接受文件進(jìn)行處理后直接返回處理后的文件,前端直接再將文件下載下來,下面這篇文章主要給大家介紹了關(guān)于element-ui?el-upload實(shí)現(xiàn)上傳文件及簡單的上傳文件格式驗(yàn)證功能的相關(guān)資料,需要的朋友可以參考下

在后臺管理系統(tǒng)中總是會用到上傳文件的功能，

想實(shí)現(xiàn)的樣式如下：（實(shí)現(xiàn)上傳文件后，在input輸入框顯示文件名）

結(jié)構(gòu)代碼如下：

 <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"    //接受上傳文件的格式，此處會默認(rèn)打開上傳時(shí)篩選.pdf格式
                  :show-file-list="false"
                  :multiple="false"  //如果想要一次選擇多個(gè)文件 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>

由于上述結(jié)構(gòu)代碼打開上傳文件時(shí)會自動篩選accept的文件格式，但是在用戶選擇時(shí)仍可以自己選擇全部文件，所以需要前端對上傳文件進(jìn)行初步的格式檢驗(yàn)

前端部分上傳文件初步檢驗(yàn)js代碼如下：

onChange(file) {
            // 校驗(yàn)格式
            if (['application/pdf'].indexOf(file.raw.type) == -1) {
                this.$message.error('請上傳正確的pdf格式');
                return false;
            }
            this.productVO.instruction = file.name;
            this.productVO.instructionFile = file.raw; //上傳文件時(shí)需要用到二進(jìn)制，所以這里文件取值為file.raw
        },

上傳至接口時(shí)js代碼如下：

submit(){
     const formData = new FormData();
     formData.append('instruction', this.productVO.instruction);
     formData.append('instructionFile',this.productVO.instructionFile);
    
 
     //調(diào)用接口
     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"

附加：當(dāng)上傳文件為多個(gè)時(shí)，具體代碼如下：

<el-form-item label="數(shù)據(jù)" class="uploadMain" prop="entity">
              <el-input
                class="uploadInput"
                v-model="productVO.entity"
                style="width: 75%"
                placeholder="請上傳完整的tif/tiff/shp格式的數(shù)據(jù)文件"
                :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) {
            // 校驗(yàn)格式
            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;
            }
           
        },

接口上傳文件時(shí)formData傳參改動如下：

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

總結(jié)

到此這篇關(guān)于element-ui el-upload實(shí)現(xiàn)上傳文件及簡單的上傳文件格式驗(yàn)證功能的文章就介紹到這了,更多相關(guān)element-ui el-upload上傳文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: