使用Vue,Node / Express和Multer进行图像上传

时间:2018-06-13 19:59:36

标签: node.js express vue.js vuejs2 multer

所以,有一个问题......我试图通过使用方法将图像上传到文件夹,但没有任何显示任何错误或其他东西,但它没有保存图像到我的文件夹。以下是代码:

Account.vue(localhost:8081 / account)模板

<label class="profileImg" for="profileImg"><img :src="profileImg" alt="Profilio nuotrauka"></label>
<input name="profileImg" id="profileImg" accept="image/*" @change="uploadProfileImg" class="mt-3" style="display: none" type="file">

Account.vue脚本

async uploadProfileImg () {
  try {
    await VendorService.uploadProfileImg({
      id: this.$store.state.vendor.id
      // otherImg: this.otherImg
    })
  } catch (error) {
    this.error = error.response.data.error
  }
}

VendorService.js

uploadProfileImg () {
  return Api().post('account')
}

Api.js

export default () => {
  return axios.create({
    baseURL: `http://localhost:8082/`
  })
}

App.js

const app = express()
app.use(morgan('combined'))
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())
app.use(cors())

require('./routes')(app)

routes.js

app.post('/account',
  VendorsController.uploadProfileImg)

VendorsController.js

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../../tmpUploads/')
  },
  filename: function (req, file, cb) {
    cb(null, req.body.id + '_profileImg')
  }
})
const upload = multer({storage: storage}).single('profileImg')

async uploadProfileImg (req, res) {
try {
  // const { id } = req.body
  await upload(req, res, function (err) {
    if (err) {
      return res.send('Fail!')
    } else {
      return res.send('Success')
    }
  })
  // cloudinary.v2.uploader.upload(`../../tmpUploads/${id}_profileImg`, {
  //   public_id: `${id}_profileImg`,
  //   overwrite: true
  // }, function (result) {
  //   console.log(result)
  // })
} catch (err) {
    res.status(400).send({
      error: 'Something went wrong'
    })
  }
}

是的,当然我正在导入所有必需的模块。

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,请尝试更改省略路径的路径,例如

tmpUploads /

要检查您的文件是否已处理

console.log(req.file)

输出将如下所示

{ 
    fieldname: 'profileImg',
    originalname: 'download.jpeg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: 'tmpUploads/',
    filename: '1533819783059_profileImg',
    path: 'tmpUploads/1533819783059_profileImg',
    size: 11320 
}