前端代码:
由于图片和其他内容无法一起提交,new一个新的formDate对象,使用append将图片文件和其他内容加到新的formDate对象,传递给后台。后台从req.body和req.file获取。

<el-form @submit.native.prevent="saveImage" ref="form" :model="image" label-width="80px" >
        <el-form-item label="图文标题">
            <el-input v-model="image.title"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
            <el-upload
                    action="https://localhost:3000/api/image/upload"
                    list-type="picture-card"
                    :auto-upload=false
                    ref="upload"
                    :http-request="upload"
                    :on-change="onchange"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    multiple>
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        <el-form-item label="ID">
            <el-input v-model="image.id"></el-input>
        </el-form-item>
        <el-form-item label="文字内容">
            <el-input v-model="image.content"></el-input>
        </el-form-item>
        <el-form-item label="图片作者">
            <el-input v-model="image.picture_author"></el-input>
        </el-form-item>
        <el-form-item label="文字作者">
            <el-input v-model="image.text_author"></el-input>
        </el-form-item>
        <el-form-item label="喜欢数">
            <el-input v-model="image.likes"></el-input>
        </el-form-item>
        <el-form-item label="展示日期">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="image.date" style="width: 100%;"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="内容类型">
            <el-select v-model="image.category" placeholder="请选择内容类型">
                <el-option label="图文" value="0"></el-option>
                <el-option label="阅读" value="1"></el-option>
                <el-option label="阅读" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" native-type="submit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>

export default {
    data() {
      return {
        image: {
          file: '',
        },
        dialogImageUrl: "",
        dialogVisible: false
      }
    },
    methods: {
      // 提交表单
      async saveImage() {
        console.log(this.image)
        const formDate = new FormData()
        const file = this.$refs.upload.uploadFiles[0]
        console.log('wenjian',file)
        const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } };
        formDate.append('file', file.raw)
        formDate.append('title', this.image.title)
        formDate.append('id', this.image.id)
        formDate.append('content', this.image.content)
        formDate.append('picture_author', this.image.picture_author)
        formDate.append('text_author', this.image.text_author)
        formDate.append('likes', this.image.likes)
        formDate.append('date', this.image.date)
        formDate.append('category', this.image.category)
        // formDate.append('body', this.image)
        console.log('sdsa',formDate.get('file'))
        await this.$http.post('image/upload', formDate, headerConfig)
        this.$router.push('/image/index')
          this.$message({
            message: '发布阅读成功!',
            type: 'success'
          })
      },
      // 删除图片
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 显示图片
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //阻止upload的自己上传,进行再操作
      onchange(file) {
        console.log(file);
        //创建临时的路径来展示图片
        // var windowURL = window.URL || window.webkitURL;
        // this.src=windowURL.createObjectURL(file.raw);
        // 将图片放入image表单对象
        this.image.file = file
        console.log(this.image.file)
        // return false;
      },

    }
  }

后台代码:

const imageType = ['image/jpeg', 'image/png', 'image/jpg']

var storage = multer.diskStorage({
  // 设置文件路径
  destination: function (req, file, cb) {
    if (imageType.indexOf(file.mimetype) !== -1) {
      cb(null, 'public/images')
    }
  },
  // 制定文件名
  filename: function (req, file, cb) {
    // 获取后缀名
    // console.log(file)
    let ext = file.originalname.split('.')[1]
    cb(null, file.fieldname + '-' + Date.now() + '.' + ext)
  },
   //  检查文件大小
  fileFilter: (req, file, cb) => {
    let { size } = req.file
    let isValid =false;
    if(!!imageType[file.mimetype] && size < 4 * 1024 * 1024  ){
      isValid = true
    }
    let error = isValid ? null : new Error('尺寸过大!');
    cb(error, isValid);
  }
})
// multer对象upload
var upload = multer({
  storage: storage
})
// 上传文件post方法,image为要上传内容的key值:前后端必须统一
// upload.single()接受一个文件的上传
router.post('/upload', upload.single('file'), (req, res) => {
  // 上传图片的信息在req.file中
  console.log(req.body)
  console.log(req.file)
  let {  filename  } = req.file
  let { date } = req.body
  // 将图片的静态路径拼接返回
  req.body.img_url = 'http://127.0.0.1:3000' + '/public/images/' + filename
  console.log(req.body.img_url)
  let insert = req.body
  console.log(insert)
    // 判断当天图片是否存在
    image.find({ date: date })
      .then((isdate) => {
        console.log('查询数据库中是否有', isdate)
        if(isdate.length === 0) {
          image.insertMany( insert )
            .then(() => {
              res.send({ err: 0, msg: '上传成功' })
            })
            .catch((err) => {
              res.send({ err: -3, msg: '上传失败' })
              console.log(err)
            })
        } else {
          return res.send({ err: -4, msg: '上传失败,数据库中已存在当天内容' })
        }
      })
      .catch(() => {
        res.send({ err: -5, msg: '上传内容格式有误' })
      })
})
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐