Uniapp에서 이미지가 아닌 오디오 파일을 업로드하는 방법
- PHPz원래의
- 2023-04-17 10:30:122193검색
모바일 인터넷의 발전과 함께 모바일 애플리케이션의 개발이 더욱 중요해졌고, 유니버설 프레임워크의 등장으로 개발 프로세스도 Vue.js 기반의 크로스 플랫폼 개발 프레임워크로서 크게 단순화되었습니다. 개발자들 사이에서 인기가 좋습니다. 유니앱에서는 사진과 음성을 매우 편리하게 업로드할 수 있는데, 텍스트, 동영상 등 다른 유형의 파일은 어떻게 업로드하나요? 이 기사에서는 Uniapp에서 이미지가 아닌 파일과 오디오 파일을 업로드하는 방법을 자세히 소개합니다.
1. 준비
업로드하기 전에 다음 준비를 해야 합니다.
1.manifest.json에 권한 추가
manifest.json 파일에 파일을 추가해야 합니다. 읽기 권한 manifest.json文件中添加文件读取的权限，具体内容如下：
{
"mp-weixin": {
"permission": {
"scope.userLocation": {
"desc": "读取文件时需要获取您的授权"
}
}
}
}
2. 安装Uniapp的uni-request库
Uniapp提供了一个网络请求封装库，名为uni-request，我们需要先安装它，以便后面使用。在HBuilderX中，使用以下命令安装：
npm install --save uni-request
这里我们选择npm方式进行安装，当然您也可以将其下载到本地，并将其作为static目录的一部分，这样可以在离线情况下使用。
二、文件上传流程
1. 选择文件
首先，我们需要引入一个内置的chooseFile方法，它可以弹出文件选择框，让用户选择要上传的文件。选择后，该方法会回调一个文件路径。
uni.chooseFile({
count: 1, // 最多选择1个文件
type: 'file', // 只允许选择文件
success: function (res) {
console.log(res.tempFiles[0].path);
// 此处拿到文件路径传到下一步中
}
});
2. 获取文件内容
接下来，我们需要将选择的文件读取出来，以便后面上传。这里我们使用uni-request的post方法，将文件路径作为参数传递过去，然后再把文件返回进行提交。
uni.chooseFile({
count: 1,
type: 'file',
success: function (res) {
uni.getFileSystemManager().readFile({
filePath: res.tempFiles[0].path,
success: function (data) {
uni.request({
url: 'http://yourpath/to/upload',
data: data.data,
method: 'post',
success: function (uploadRes) {
console.log(uploadRes);
}
});
}
});
}
});
这里需要注意的是，我们使用了getFileSystemManager方法获取到了文件系统管理器，然后使用该管理器下面的readFile方法读取文件，最后拿到的是一个Buffer对象。而如果我们直接把Buffer对象作为参数传递过去，服务端可能需要额外的操作才能获取到文件，所以我们需要将其转化为二进制流后再上传。
3. 将Buffer对象转化为二进制流
在上一步中，我们已经把文件读取出来并且得到了一个Buffer对象。但是，我们需要将其转化为二进制流，然后再进行上传。这里，我们可以使用一个现有的库，如file-stream：
uni.chooseFile({
count: 1,
type: 'file',
success: function (res) {
uni.getFileSystemManager().readFile({
filePath: res.tempFiles[0].path,
success: function (data) {
const stream = require('file-stream').createReadStream(data.data);
stream.on('data', function (chunk) {
uni.request({
url: 'http://yourpath/to/upload',
data: chunk,
method: 'post',
success: function (uploadRes) {
console.log(uploadRes);
}
});
});
}
});
}
});
这样，我们就成功把Buffer对象转化为二进制流，并上传到服务器上了。需要注意的是，在file-stream库中，我们使用了createReadStream方法创建了一个流，然后使用on('data')方法来监听数据片段的传输过程，最后传递到uni.request的data中，完成上传。
三、总结
在Uniapp中上传非图片和录音文件需要经过多个步骤，包括文件选择、读取文件内容、转化为二进制流和上传服务器等。但是，Uniapp和uni-request的API都非常好用，因此这个过程就变得十分简单和清晰了。
当然，我们还可以使用其他一些库来实现文件上传，如multerrrreee
chooseFile 메소드를 도입해야 합니다. 업로드합니다. 이 메소드를 선택하면 파일 경로를 콜백합니다. 🎜rrreee🎜2. 파일 내용 가져오기🎜🎜다음으로 나중에 업로드하기 위해 선택한 파일을 읽어야 합니다. 여기서는 uni-request의 post 메소드를 사용하고 파일 경로를 매개변수로 전달한 다음 제출할 파일을 반환합니다. 🎜rrreee🎜여기서 주목해야 할 점은 getFileSystemManager 메서드를 사용하여 파일 시스템 관리자를 얻은 다음 관리자 아래의 readFile 메서드를 사용하여 파일을 읽는다는 것입니다. 마지막으로 도착하는 것은 Buffer 객체입니다. 그리고 Buffer 객체를 매개변수로 직접 전달하는 경우 서버에서 파일을 얻기 위해 추가 작업이 필요할 수 있으므로 업로드하기 전에 해당 파일을 바이너리 스트림으로 변환해야 합니다. 🎜🎜3. Buffer 객체를 바이너리 스트림으로 변환🎜🎜이전 단계에서는 파일을 읽고 Buffer 객체를 얻었습니다. 하지만 업로드하기 전에 바이너리 스트림으로 변환해야 합니다. 여기서는 file-stream과 같은 기존 라이브러리를 사용할 수 있습니다. 🎜rrreee🎜이러한 방식으로 Buffer 개체를 바이너리 스트림으로 성공적으로 변환하고 서버에 업로드합니다. file-stream 라이브러리에서는 createReadStream 메서드를 사용하여 스트림을 생성한 다음 on('data')을 사용한다는 점에 유의해야 합니다. code > 메소드를 사용하여 데이터 조각의 전송 프로세스를 모니터링하고 마지막으로 이를 <code>uni.request의 데이터에 전달하여 업로드를 완료합니다. 🎜🎜3. 요약🎜🎜 Uniapp에서 이미지 및 오디오 파일이 아닌 파일을 업로드하려면 파일 선택, 파일 콘텐츠 읽기, 바이너리 스트림으로 변환 및 서버 업로드를 포함한 여러 단계가 필요합니다. 하지만 Uniapp과 uni-request의 API는 사용하기가 매우 쉽기 때문에 프로세스가 매우 간단하고 명확해집니다. 🎜🎜물론 multer 등과 같은 다른 라이브러리를 사용하여 파일 업로드를 구현할 수도 있습니다. 사용 중에는 불필요한 문제를 피하기 위해 데이터의 흐름과 처리에 주의를 기울여야 합니다. 🎜위 내용은 Uniapp에서 이미지가 아닌 오디오 파일을 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!