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>