ruoyi實(shí)現(xiàn)不需要token訪問靜態(tài)資源

在config/SecurityConfig配置

.antMatchers(
                        HttpMethod.GET,
                        "/",
                        "/*.html",
                        "/**/*.html",
                        "/**/*.css",
                        "/**/*.js",
                        //profile下有很多文件，只開放頭像類的文件
                        "/profile/upload/**",
                        "/profile/**",
                        "/profile/avatar/**"

"/xxx/**"讓xxx路徑下的全部文件訪問不需要token

在config/ResourcesConfig中增加

        /** 本地文件上傳路徑 */
        registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**")
                .addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");

前端加入Element Ui upload組件組件

<template>
  <div ref="dasd">
    <el-upload
      class="img-upload"
      ref="upload"
      action="http://localhost:8080/dss/ServiceStd/uploadimg"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :headers="header"
      :before-remove="beforeRemove"
      :on-success="handleSuccess"
      multiple
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
export default {
  name: 'ImgUpload',
  data () {
    return {
      fileList: [],
      url: '',
      header: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },

  methods: {
    handleRemove (file, fileList) {
      this.$emit("clearImageUrl")
    },
    handlePreview (file) {
    },
    handleExceed (files, fileList) {
      this.$message.warning(`當(dāng)前限制選擇 1 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`確定移除 ${file.name}？`)
    },
    handleSuccess (response) {
      this.url = response
      this.$emit('onUpload')
      this.$message.warning('上傳成功')
    },
    clear () {
      this.$refs.upload.clearFiles()
    },

  }
}
</script>

解決Element ui上傳圖片時(shí)未攜帶token訪問不到服務(wù)器問題

在data()里面加入header屬性設(shè)置子屬性Authorization

data () {
    return {
		header: {
        Authorization: 'Bearer ' + getToken()
      }
    }

在el-upload里設(shè)置

<el-upload
:headers="header"
>

解決upload組件重新進(jìn)入上傳時(shí)清除上次上傳

在提交時(shí)

            <el-form-item label="作業(yè)標(biāo)準(zhǔn)示范" prop="OpeStdThr">
              <el-input v-model="form.OpeStd" autocomplete="off" placeholder="圖片 URL" readonly></el-input>
             <img-upload @onUpload="uploadImg" ref="imgUpload" @clearImageUrl="clearImageUrl(1)"></img-upload>
            </el-form-item>

在提交時(shí)新增clear()方法調(diào)用子組件里clear方法

submitForm: function () {
          this.$refs.imgUpload.clear();
        }

刪除圖片時(shí)同時(shí)刪除URl

加入@clearImageUrl綁定方法

            <el-form-item label="作業(yè)標(biāo)準(zhǔn)示范" prop="OpeStdThr">
              <el-input v-model="form.OpeStd" autocomplete="off" placeholder="圖片 URL" readonly></el-input>
             <img-upload @onUpload="uploadImg" ref="imgUpload" @clearImageUrl="clearImageUrl(1)"></img-upload>
            </el-form-item>

clearImageUrl(1) 括號(hào)內(nèi)可以直接攜帶參數(shù)，根據(jù)參數(shù)執(zhí)行哪種方法文章來源地址http://www.zghlxwxcb.cn/news/detail-627186.html

    clearImageUrl(type) {
      if (type == 1) {
      	//delImgUrl調(diào)用后端接口刪除已上傳的照片
        delImgUrl(this.form.OpeStdOne);
        this.form.OpeStdOne = '';
      }else if (type ==2) {
        delImgUrl(this.form.OpeStdTwo);
        this.form.OpeStdTwo = '';
      }else if (type == 3) {
        delImgUrl(this.form.OpeStdThr);
        this.form.OpeStdThr = '';
      }
    }

delImgUrl可以采用兩種方式

1. 使用緩存，到了一定圖片數(shù)量再去刪除
2. 直接去后臺(tái)刪除

到了這里，關(guān)于Element UI upload 圖片上傳功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！