async choseVideo(){ const that = this // uploadFile 存储需要上传的文件 let uploadFile = '' // 1.选择要上传的视频 const res = await uni.chooseVideo({ maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 sourceType: ['album','camera'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera'] }); uploadFile = res[1].tempFilePath; uni.showLoading({title: "上传中"}); console.log(uploadFile,'uploadFile') const uploadTask = http.uploadFile([uploadFile]).then(picRes => { that.obj.video = picRes&&picRes.length?picRes[0]:null that.$forceUpdate() uni.hideLoading() uni.showToast({ title: "上传成功", icon: 'success' }); }) },

这段代码是一个异步方法，用于选择并上传视频。它首先定义了一个常量 `that`，用于保存当前的 `this` 上下文。然后它定义了一个变量 `uploadFile`，用于存储需要上传的视频文件。接着，它调用了 `uni.chooseVideo` 方法，弹出一个视频选择的界面，让用户选择要上传的视频。在用户选择好视频后，它将视频的临时文件路径赋值给 `uploadFile`。接下来，它调用了 `uni.showLoading` 方法，显示一个加载提示框，提示用户正在上传视频。然后，它调用了 `http.uploadFile` 方法，将 `uploadFile` 中的视频文件上传到服务器。当上传完成后，它会将上传后的结果赋值给 `that.obj.video`，这里的 `obj` 可能是当前页面的一个数据对象。然后，它调用了 `$forceUpdate` 方法，强制更新页面，以便显示上传后的视频。最后，它调用 `uni.hideLoading` 方法，隐藏加载提示框，并显示一个上传成功的提示框。

相关问题

<input id="uploadFile" type="file" accept="image/*" webkitdirectory /> <button id="submit" onclick="uploadFile()">上传文件</button> <script> const uploadFileEle = document.querySelector("#uploadFile"); const request = axios.create({ baseURL: "http://localhost:3000/upload", timeout: 60000, }); async function uploadFile() { if (!uploadFileEle.files.length) return; const files = Array.from(uploadFileEle.files); upload({ url: "/multiple", files, }); } function upload({ url, files, fieldName = "file" }) { let formData = new FormData(); files.forEach((file, i) => { // formData.append(fieldName, files[i], files[i].name); // 对webkitRelativePath路径进行处理，确保@koa/multer能正确接收路径 formData.append( fieldName, files[i], files[i].webkitRelativePath.replace(/\//g, "@") ); }); request.post(url, formData);

这段代码主要实现了上传文件的功能。具体解释如下：

第一行代码使用 HTML 的 input 元素创建了一个文件上传组件，用户可以选择文件上传，同时使用 accept 属性限制上传文件类型为图像文件。

第二行代码创建了一个上传文件的按钮，当用户点击该按钮时会调用 uploadFile 函数进行文件上传。

第三行代码定义了一个 JavaScript 脚本，该脚本使用了 axios 库创建了一个 HTTP 请求实例，用于向服务器发送文件上传请求。

第五行代码定义了一个异步函数 uploadFile，该函数首先判断用户是否选择了上传文件，如果没有选择则直接返回，否则获取用户选择的文件列表，然后调用 upload 函数进行文件上传。

第十行代码定义了一个 upload 函数，该函数接收三个参数：url 表示上传文件的 URL，files 表示要上传的文件列表，fieldName 表示上传文件的字段名，默认为 "file"。

第十三行代码创建了一个 FormData 对象，用于将要上传的文件数据以表单形式提交到服务器。

第十四行代码使用 forEach 循环遍历文件列表，将每个文件添加到 formData 对象中。同时，对于每个文件，将其对应的 webkitRelativePath 属性中的所有斜杠替换为 @ 符号，以确保服务器能够正确地接收文件路径。最后，调用 axios 库的 post 方法将文件数据上传到指定的 URL。

// 新增图片 async afterRead(event) { // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 let lists = [].concat(event.file) let fileListLen = this[`fileList${event.name}`].length lists.map((item) => { this[`fileList${event.name}`].push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise(lists[i].url) let item = this[`fileList${event.name}`][fileListLen] this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) fileListLen++ } }, uploadFilePromise(url) { return new Promise((resolve, reject) => { let a = uni.uploadFile({ url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址 filePath: url, name: 'file', formData: { user: 'test' }, success: (res) => { setTimeout(() => { resolve(res.data.data) }, 1000) } }); }) }

这段代码实现了在 uniapp 中新增图片上传，其中包括以下步骤：

1. 在模板中通过 `uni-upload` 组件实现文件上传：

<template>
  <div>
    <div>
      <div>单个文件上传</div>
      <uni-upload :name="'1'" :file-list="fileList1" :max-count="1" :show-file-list="true" :preview-image="true" @after-read="afterRead"></uni-upload>
    </div>
    <div>
      <div>多个文件上传</div>
      <uni-upload :name="'2'" :file-list="fileList2" :max-count="3" :show-file-list="true" :preview-image="true" @after-read="afterRead"></uni-upload>
    </div>
  </div>
</template>

2. 在 `afterRead` 方法中实现文件上传：

async afterRead(event) {
  let lists = [].concat(event.file)
  let fileListLen = this[`fileList${event.name}`].length
  lists.map((item) => {
    this[`fileList${event.name}`].push({
      ...item,
      status: 'uploading',
      message: '上传中'
    })
  })
  for (let i = 0; i < lists.length; i++) {
    const result = await this.uploadFilePromise(lists[i].url)
    let item = this[`fileList${event.name}`][fileListLen]
    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
      status: 'success',
      message: '',
      url: result
    }))
    fileListLen++
  }
}

3. 在 `uploadFilePromise` 方法中使用 Promise 实现文件上传：

uploadFilePromise(url) {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: 'test'
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data)
        }, 1000)
      }
    });
  })
}

这样就可以在 uniapp 中实现图片上传了。需要注意的是，此处的代码中使用了 `async/await` 和 Promise，需要在项目中启用 async/await 语法和 Promise 支持。