Vue el-upload + express 实现上传图片及访问（可解决Not allowed to load local resource）

思路

• 以formData的数据格式上传图片
• 后端存储图片到文件夹(/images/)下，并且返回给前端图片名称（imgUrl）
• 前端通过’http://localhost:3000/images/imgUrl’的形式访问图片地址（解决浏览器拒绝访问本地文件），用于展示（这里的访问地址是服务器端口启动的地址）

前端代码

<el-upload
    class="avatar-uploader"
    action="string"
    method="post"
    :http-request="uploadImage"		// 自定义上传图片函数
>
  <img v-if="formLabelAlign.imageUrl" :src="resource+formLabelAlign.imageUrl" class="avatar">
  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
<script>
export default {
  name: "Attractions",
  data() {
    return {
      formLabelAlign: { title: '', date: '', content: '', imageUrl: '', filename: '', label: ''},
      resource: 'http://localhost:3000/images/',
    }
  },
  methods: {
    uploadImage(params){
    // 图片以formData格式上传，并且请求头需要设置'Content-Type': 'multipart/form-data'
      let formData = new FormData()   
      formData = { file: params.file,}
      const config = {
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      };
      // 发起axios请求
      this.request.post('/attractions/uploadImage', formData, config).then(res=>{
        // 拿到上传图片的名称，存在imageUrl中
        this.formLabelAlign.imageUrl = res.data.data
      })
    }
  },
}
</script>

后端代码

const MsgCode = require("../config/MsgCode");
const multer = require('multer')	// 引入multer：图片处理的工具包
const path = require('path')
const storage = multer.diskStorage({
  // 配置文件上传后存储的路径
  destination: function (req, file, cb) {
    // NodeJS的两个全局变量
    // console.log("__dirname: ", __dirname);  //获取当前文件在服务器上的完整目录
    // console.log("__filename: ", __filename); //获取当前文件在服务器上的完整路径
    cb(null, path.join(__dirname, '../public/images'))
  },
  // 配置文件上传后存储的路径和文件名
  filename: function (req, file, cb) {
    let defineFilename = new Date().getTime() + file.originalname     // 防止图片名重复
    cb(null, defineFilename)
  }
})
const upload = multer({
  fileFilter(req, file, callback) {
    // 解决中文名乱码的问题
    file.originalname = Buffer.from(file.originalname, "latin1").toString("utf8");
    callback(null, true);
  },
  storage: storage
})

// 上传首页图
router.post('/uploadImage',upload.single('file'), function (req, res, next){
  // console.log(req.file)
  MsgCode(res, req.file.filename, "")	// 返回前端的自定义函数，读者可以自己使用res.end()进行数据传输
})

有问题请下方留言，欢迎交流