uni-app 选择和上传非图像、视频文件

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 选择和上传非图像、视频文件
小程序和H5端，参考： https://uniapp.dcloud.io/api/media/file

App端，可以使用如下方法：

关联阅读：视频、图片、各种文件推荐上传到uni-cdn，帮你节省至少30%的 CDN 费用！详情


Harmonyos Next教程
1 回复

在处理 uni-app 中的非图像、视频文件上传时，你需要处理文件选择、文件读取和文件上传等步骤。以下是一个简单的示例代码，展示了如何在 uni-app 中选择和上传非图像、视频文件（如文本文件、PDF等）。

1. 文件选择

使用 <input type="file"> 元素进行文件选择。在 uni-app 中，可以通过 plus.io.resolveLocalFileSystemURL 访问本地文件。

<template>
  <view>
    <button @click="chooseFile">选择文件</button>
    <view v-if="filePath">
      <text>选中文件: {{ filePath }}</text>
      <button @click="uploadFile">上传文件</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filePath: ''
    };
  },
  methods: {
    chooseFile() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '*'; // 允许选择所有文件类型
      input.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (event) => {
            const localURL = event.target.result;
            // 这里localURL为文件的blob URL，你可以通过plus API进一步处理
            this.filePath = localURL;
          };
          reader.readAsDataURL(file);
        }
      };
      input.click();
    },
    uploadFile() {
      // 假设你有一个上传接口：https://example.com/upload
      const xhr = new XMLHttpRequest();
      const formData = new FormData();
      formData.append('file', {
        uri: this.filePath,
        type: 'application/octet-stream', // 根据实际文件类型调整
        name: 'filename.txt' // 文件名，可以根据需要调整
      });

      xhr.open('POST', 'https://example.com/upload', true);
      xhr.onload = () => {
        if (xhr.status === 200) {
          console.log('上传成功:', xhr.responseText);
        } else {
          console.error('上传失败:', xhr.statusText);
        }
      };
      xhr.send(formData);
    }
  }
};
</script>

注意事项

  1. 文件类型处理：示例中使用了 accept='*' 来允许选择所有文件类型。你可以根据需要调整 accept 属性来限制文件类型。
  2. 文件读取：使用 FileReader 读取文件内容，并生成一个本地 URL。在 uni-app 中，你可能需要借助 plus API 进一步处理文件。
  3. 文件上传：使用 XMLHttpRequest 和 FormData 对象进行文件上传。确保你的服务器支持处理 multipart/form-data 请求。

这个示例代码展示了基本的文件选择和上传流程。根据你的具体需求，你可能需要进一步优化和扩展这个示例。

回到顶部