(demo)element-ui上传图片

• 使用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为空，这样就可以使用第一种方法