HarmonyOS 鸿蒙Next如何上传本地图片

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何上传本地图片

使用axios网络框架，如何上传本地图片？本地图片地址file://media/Photo/3/***.jpg已经获取，想用FormDatas设置一下，是否需要根据url先创建一个file对象？还是转换成一个地址？直接用file://地址，报错ERR_BAD_OPTION_VALUE，the parameters check fails Parse config files error

期待结果：
希望能够正常上传本地图片，接口可以访问通过
  
let formData = new FormData()
formData.append(‘file’, ‘file://media/Photo/3/***.jpgt’);


// 发送请求
axios.post<string, AxiosResponse<string>, FormData>(‘http//*****’ formData, {
// headers: { ‘Content-Type’: ‘multipart/form-data’ },
context: getContext(this),
onUploadProgress: (progressEvent: AxiosProgressEvent): void => {


},

}).then((res: AxiosResponse<string>) => {


}).catch((err: AxiosError) => {


})

Harmonyos Next教程
4 回复

axios上传类型支持uri和ArrayBuffer ，下面demo中value是拿到的URI,

header请求头也设置一下，放开注释

// 转化为internal://cache

fs.open(value, fs.OpenMode.READ_ONLY).then((file) => { // READ_ONLY READ_WRITE


let newPath = this.context.cacheDir + /test.png;


fs.copyFile(file.fd, newPath).then(() => {


console.info(<span class="hljs-string">"applog:copy file succeed"</span>);

<span class="hljs-keyword">let</span> realUri = <span class="hljs-string">"internal://cache/"</span>+newPath.split(<span class="hljs-string">"cache/"</span>)[<span class="hljs-number">1</span>];

console.log(<span class="hljs-string">'realUri'</span>+<span class="hljs-built_in">JSON</span>.stringify(realUri))

}).catch((err:BusinessError) => {


console.info(<span class="hljs-string">"applog:copy file failed with error message: "</span> + err.message + <span class="hljs-string">", error code: "</span> + err.code);

});


}).catch((err:BusinessError) => {


console.info("applog:open file failed with error message: " + err.message + ", error code: " + err.code);


})


// 转化为Arraybuffer


let file = fs.openSync(value, fs.OpenMode.READ_ONLY)


const imageSource = image.createImageSource(file.fd);


fs.closeSync(file)


const imagePackApi = image.createImagePacker()


let packOpts: image.PackingOption = { format: “image/png”, quality: 100 }


imagePackApi.packing(imageSource, packOpts)


.then(readBuffer => {


<span class="hljs-keyword">let</span> bufferArr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8Array</span>(readBuffer);

<span class="hljs-keyword">let</span> help =<span class="hljs-keyword">new</span> util.Base64Helper()

<span class="hljs-keyword">let</span> base64 = help.encodeToStringSync(bufferArr)

console.log(<span class="hljs-string">'base64'</span>+<span class="hljs-built_in">JSON</span>.stringify(base64))

console.log(<span class="hljs-string">'bufferArr'</span>+<span class="hljs-built_in">JSON</span>.stringify(bufferArr))

}).catch((err:BusinessError) => {


console.error('PhotoViewPicker.select failed with err: ’ + err);


})<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

直接上传文件的 ArrayBuffer

function uploadFile(url: string) {
  let formData = new FormData()
  // 读取文件的arrayBuffer 内容
  let file = fs.openSync(url, fs.OpenMode.READ_ONLY);
  let stat = fs.lstatSync(url);
  let fileBuffer = new ArrayBuffer(stat.size);
  fs.readSync(file.fd, fileBuffer); // Read data from the stream file in synchronous mode.
  fs.fsyncSync(file.fd);
  fs.closeSync(file.fd);

formData.append(‘file’, fileBuffer);
// …
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

可以试一下以上的demo.

用fileio 复制一份存到沙箱，上传沙箱的路径

在HarmonyOS鸿蒙Next中上传本地图片，可以按照以下步骤进行：

  1. 选择图片：使用@ohos.file.picker模块的图库选择器（PhotoViewPicker）来选择图片。在选择之前，可以设置选择数量、资源类型等参数。
  2. 拷贝图片：由于上传应用文件功能不支持直接上传本地相册的文件，仅支持上传应用缓存文件路径（cacheDir）下的文件，因此需要先将选中的图片拷贝到应用的缓存目录中。
  3. 上传图片：使用@ohos.request模块提供的request.uploadFile方法将图片上传到服务器。在上传之前，需要准备好参数，包括上传地址、请求方法、请求头、文件信息等。
  4. 处理响应：上传完成后，服务器会返回响应。可以通过监听progress事件来跟踪上传进度，并在上传完成后解析服务器返回的响应数据。

如果在操作过程中遇到问题，建议查阅HarmonyOS官方文档或相关开发社区。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部