Question

我正在构建一个处理文件上传的电子应用程序，我正在使用对话框从用户获取文件，我需要将文件发送到服务器，但我得到了文件路径，但是在发送时出现错误。我正在使用Vue资源进行请求。以下是我的代码：

<template>
  <div>
  <button @click="uploadAct()"  class="primary">New Upload </button>  
 </div>
</template>
<script>
const {dialog} = require('electron').remote
const fs = require('fs')
import reqApi from '../../api/something'
export default {
 methods: {
   uploadAct () {
     dialog.showOpenDialog({
        title: 'Upload Attachments',
        buttonLabel: 'Upload',
        filters: [
          {name: 'Images', extensions: ['jpg', 'png', 'gif']},
          {name: 'All Files', extensions: ['*']}
        ],
        properties: ['openFile', 'multiSelections']
      }, function (filenames) {
        if (filenames) {
           let d = ''
          filenames.forEach(function (element) {
            d = element
          })
         // here i get a path of file correctly something like /path/to/file.jpg

          reqApi.uploadattachmnets({photo: fs.createReadStream(d)}).then(
              (response) => {
                console.log(response)
              },
              (error) => {
                console.log(error)
              })
           //  })

        }
      })
  }
 }
}
</script>

但是我对请求的结果有误，我们将不胜感激。

Answer 1

可能是一个错字，但你有一个API的调用：

carApi.uploadattachmnets({photo: fs.createReadStream(d)})

与您导入的不同：

import reqApi from '../../api/something'

如果不是上面我假设如果Postman已经能够发送文件并从端点接收正确的响应，这将是一个CORS问题。如果没有更多信息，我建议您查看：https://www.html5rocks.com/en/tutorials/cors/#toc-making-a-cors-request

要获得更具体的回复，您需要发布API代码，以便我们查看您发送文件的方式。

Electron Dialog使用vue资源将文件发送到服务器

1 个答案: