前言：由于electron的特性，将代码分为主进程和渲染进程，由于安全原因，渲染进程不能直接访问操作系统资源，如文件系统、网络等，需要通过主线程提供的API来进行操作。同时，为了保证性能和稳定性，应该避免在渲染进程中执行耗时的操作，例如大量的计算、数据处理等。

Naive UI的上传组件在electron中使用

  • 简单的上传可以直接用其封装好的钩子函数即可，但是如果要自定义上传后的操作，需要写一个函数进一步解决相关的需求

自定义上传函数

  1. 一开始的时候是用自定义上传的钩子函数custom-request来对上传后的文件流进行编辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 上传文件的函数
async function uploadFileRequest(data: any) {
    let FormDatas = new FormData()
    // 上传文件的需要formdata类型;所以要转
    FormDatas.append('file', data.file.file);
    await Api.File.uploadFile(FormDatas).then((res) => {
        if (res.code == '200') {
            handleUploadSuccess()
            emit('UploadVideoSuc', res?.data)
        } else {
            handleUploadError()
        }
    })
}
  1. 这种方法在Web浏览器上是可以实现的，但是到了electron上面的渲染进程就不可以了。
  2. 解决方法也很简单，不用该自定义的钩子函数来实现上传即可。

实现方法

  • Naive UI有自己封装好的上传成功和失败的函数，主要用到on-finish这个钩子函数
  • 我这里主要是获取上传成功后的url信息，所以用到了JSON.parse(options.event.target.response).data.url
1
2
3
4
5
6
7
8
// 上传成功函数
function handleUploadSuccess(options?: any) {
    window.$message.success('上传成功');
    const response = JSON.parse(options.event.target.response);
    if(response.code == '200'){
        emit('UploadCoverSuc', response.data);
    }
}
  • 其中options.event.target.response就是上传成功后返回的相关信息，相当于请求了接口后返回的res吧
  • JSON.parse(options.event.target.response).data.url其实就是相对应res.data.url