Elemennt文件上傳el-upload設置上傳文件圖片格式限制

 

 此方法為上傳前對文件進行效驗

 beforeAvatarUploadPdf (file) {
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension = testmsg === 'jpg'
        const extension2 = testmsg === 'png'
        const extension4 = testmsg === 'jpeg'
        if (!extension && !extension2) {
          this.$message({
            message: '上傳文件只能是 jpg, jpeg, png格式!',
            type: 'warning'
          })
          return false
        }
        return extension || extension2 || extension4
      }

 

accept="image/jpg,image/jpeg,image/png"  本行設置了上傳時文件選擇窗口的文件類型，但是用戶依舊可以選擇顯示全部文件，依舊可以上傳其他格式文件。

:before-upload="beforeAvatarUploadPdf"    通過設置:before-upload 來調用上面的方法來實現上傳之前對文件的類型效驗。

<el-form-item label="頭圖" prop="pic"

                :rules="[

                 ]">

              <el-upload ref="pic"

              v-if="visible"

              list-type="picture-card"

               accept="image/jpg,image/jpeg,image/png"

                    :action="``"

                    :headers="{token: $cookie.get('token')}"

                     :before-upload="beforeAvatarUploadPdf"

                    :on-preview="(file, fileList) => {

                        $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {

                          dangerouslyUseHTMLString: true,

                          showConfirmButton: false,

                          closeOnClickModal: true,

                          customClass: 'showPic'

                        });

                    }"

                    :on-success="(response, file, fileList) => {

                       inputForm.pic = fileList.map(item => (item.response && item.response.url) || item.url).join('|')

                    }"

                    :on-remove="(file, fileList) => {

                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {

                        $message.success(data.msg)

                      })

                      inputForm.pic = fileList.map(item => item.url).join('|')

                    }"

                    :before-remove="(file, fileList) => {

                      return $confirm(`確定移除 ${file.name}？`)

                    }"

                    multiple

                    :limit="1"

                    :on-exceed="(files, fileList) =>{

                      $message.warning(`當前限制選擇 1 個文件，本次選擇 ${files.length} 個文件，共選擇 ${files.length + fileList.length} 個文件`)

                    }"

                    :file-list="picArra">

                    <i class="el-icon-plus"></i>

                  </el-upload>

           </el-form-item>