(demo)element-ui上传图片

最新推荐文章于 2025-03-11 11:28:52 发布

vvvvv_2

最新推荐文章于 2025-03-11 11:28:52 发布

阅读量299

点赞数

本文链接：https://blog.youkuaiyun.com/qq_36663526/article/details/108207595

版权

框架及插件专栏收录该内容

9 篇文章

订阅专栏

使用element-ui的upload进行图片上传

	 <el-form-item label="图标">
        <el-upload class="avatar-uploader" :action="$http.defaults.baseURL + '/upload'" :show-file-list="false" :on-success="afterUpload">
          <img v-if="model.icon" :src="model.icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 178px;"></i>
        </el-upload>
      </el-form-item>

Request URL: http://localhost:3000/api/admin/upload
在这里插入图片描述

后端接口编写

  //图片上传
  const multer = require('multer')
  const upload = multer({ dest:__dirname + '/uploads'})
  //upload.single()表示单个文件的上传 此处的file为network的formdata 名字可改(el的upload查看)
  app.post('/api/admin/upload',upload.single('file'),async(req,res) => {
    const file = req.file
    res.send(file)
  })

在这里插入图片描述

为图片添加url

  app.use('/uploads',express.static(__dirname + '/uploads'))

  //图片上传
  const multer = require('multer')
  const upload = multer({ dest:__dirname + '/uploads'})
  //upload.single()表示单个文件的上传 此处的file为network的formdata 名字可改(el的upload查看)
  app.post('/api/admin/upload',upload.single('file'),async(req,res) => {
    const file = req.file
    file.url = `http://localhost:3000/uploads/${file.filename}`
    res.send(file)
  })

在这里插入图片描述

在edit.vue页面中添加图片显示方法

  data() {
    return {
      model: {},
    }
  },
  methods: {
  	afterUpload(res) {
      this.model.icon = res.url
    }
  }

在这里插入图片描述

可以看到已经有url了，但是图片并没有显示。这是vue的数据响应式问题。model本来为空，但是这里手动加了一个属性icon，所以可能普通赋值会失败。这里使用另外种：

    afterUpload(res) {
      // this.model.icon = res.url
      this.$set(this.model,'icon',res.url)
    }

也可以在data的model里定义icon为空，这样就可以使用第一种方法