# 上传下载操作

方法说明中并非所有的方法都会写在文档中，具体请前往相关文件查看代码逻辑。

# 文件位置

TIP

文件位于 src\control\uc-file\ucFile.js sendGif

# 使用须知

只能拿到文件流，不能拿到图片路径的图片都会通过 axios 上传（比如通过剪贴板拿到的图片或者截图，都只能拿到 Base64），不会通过致信的壳进行上传，因为致信壳的上传是通过文件流进行读取然后上传的，需要读取到路径。
文件上传下载其实应该还可以再次进行重构优化，但是目前下载逻辑这一块一直沿用老的逻辑，重构风险非常高，如果时间充足可以考虑试一下。

# 使用方法

上传代码可以参考 src\views\_uc-chat\msg-chat\content-send\contentSend.vue 下载代码可以参考 src\components\chatMessage\file.vue

// 引入文件上传模块
import { sendFile } from "@/views/_uc-chat/msg-chat/content-send/send-file/index.js";

/**
 *
 * @param {*} file 文件
 * @param {*} param1 传 { currentUserInfo, currentChatList }
 * @param {*} time 延时上传时间，一下子加很多文件，没有延时的话会有性能问题，比如选项卡切换不动
 * @param {*} callback 回调
 */
sendFile(file, { currentUserInfo, currentChatList }, (time = 0), callback);

# 依赖文件

import store from "../../store";
import * as RY from "../../service/conn_RY.js";
import axios from "axios";

# 方法说明

# UC_File(fileMessage)

实例化文件上传

fileMessage 文件信息

代码示例

let uploadFile = new UC_File(fileMessage);

# upload(file, callback)

上传文件

file 文件
callback 回调

代码示例

let uploadFile = new UC_File(fileMessage);
uploadFile.upload(file, (status, data) => {
  console.log(status, data);
  if (status == "success") {
    console.log("上传完成后返回的数据", data);
    let fileInfo = JSON.parse(data);
    console.log("格式化上传完成后返回的数据", fileInfo, fileMessage);
    const fileURL = fileInfo.atts[0].fileUrl;
    fileMessage.content.fileUrl = fileURL;

    // 解决添加消息体后已经向数据库写入了，但是发送后不更新fileURL的问题
    ZX_CLIENT.ImMsg.updateChatMessage(
      {
        messageId: fileMessage.messageId,
      },
      {
        content: fileMessage.content,
      }
    );

    // 上传完成后发送文件消息
    fileMessage.sent({
      conversationType: currentChatList.conversationType,
      targetId: currentChatList.targetId,
      needAppend: false,
      targetName: currentChatList.conversationTitle,
    });

    // 返回文件上传成功
    callback && callback("finish");
  }
});

# canelUpload()

取消上传该文件

代码示例

let uploadFile = new UC_File(fileMessage);
uploadFile.canelUpload();

# download(callback)

下载文件

代码示例

let downloadFile = new UC_File(message);
downloadFile.downloadFolder(downloadCallback);

# downloadSaveAs(callback)

下载另存为

代码示例

let downloadFile = new UC_File(message);
downloadFile.downloadSaveAs(downloadCallback);

# downloadFolder(callback)

下载文件夹

代码示例，更多详情见 src\components\chatMessage\folder.vue

let downloadFile = new UC_File(message);
downloadFile.downloadFolder(this.downloadCallback);

# downloadFolderSaveAs(callback)

下载文件夹另存为

let downloadFile = new UC_File(message);
downloadFile.downloadFolderSaveAs(this.downloadCallback);

# 代码分析

# 文件上传

上传文件中的 header 现在是可以自定义的了，但是如果 header 传的不对，比如里面的 cookie 不对，就会导致上传失败！

先获取到正确的JSESSIONID和ROUTE，如果这两个不对，就会导致上传失败！

// cookie
let JSESSIONID = ZX_CLIENT.getJSESSIONID();
let ROUTE = ZX_CLIENT.getROUTE();
let cookie = "";
if (ROUTE == "" || ROUTE == undefined) {
  cookie = "JSESSIONID=" + JSESSIONID;
} else {
  cookie = "JSESSIONID=" + JSESSIONID + ";" + "route=" + ROUTE + ";";
}

上传功能调用了ZX_CLIENT.uploadFiles，代码示例和回调信息处理如下

/**
 *
 * @param {*} uploadPath 文件路径
 * @param {*} uploadURL 上传地址
 * @param {*} cookie cookie
 * @param {*} messageId 消息Id
 */
function uploadFile(uploadPath, uploadURL, cookie, messageId, callback) {
  store.dispatch("UcFile_setFileStatus", {
    messageId,
    fileStatus: FileStatus.UPLOADING,
  });
  ZX_CLIENT.uploadFiles(
    // 文件路径
    uploadPath,
    // 服务器URL
    uploadURL,
    "file",
    // 下面的就是自定义的header了
    {
      "Content-Type": "multipart/form-data",
      Cookie: cookie,
      "User-Agent-Client": "ucpc",
    },
    // 消息ID
    messageId,
    // 回调对象
    {
      // 上传错误回调
      onError: (errorType) => {
        if (errorType == "cancel") {
          store.dispatch("UcFile_setFileStatus", {
            messageId,
            fileStatus: FileStatus.UPLOAD_CANCEL,
          });
          callback && callback("error", FileStatus.UPLOAD_CANCEL);
        } else {
          store.dispatch("UcFile_setFileStatus", {
            messageId,
            fileStatus: FileStatus.UPLOAD_FAILED,
          });
          callback && callback("error", FileStatus.UPLOAD_FAILED);
        }
      },
      // 上传进度回调
      onProgress: (loaded, total) => {
        var percent = Math.floor((loaded / total) * 100);

        store.dispatch("UcFile_setFileProgress", {
          messageId,
          fileProgress: percent,
        });

        callback && callback("progress", percent);
      },
      // 上传完成回调
      onCompleted: (data) => {
        try {
          console.log("onCompleted1", data);
          store.dispatch("UcFile_setFileStatus", {
            messageId,
            fileStatus: FileStatus.UPLOADED,
          });
          console.log("onCompleted2", data);
          console.log("onCompleted2", callback);
          callback && callback("success", data);
        } catch (error) {
          store.dispatch("UcFile_setFileStatus", {
            messageId,
            fileStatus: FileStatus.UPLOAD_FAILED,
          });
          callback && callback("error", FileStatus.UPLOAD_FAILED);
        }
      },
    }
  );
}

// 取消上传，只需要传文件ID就可以了
function cancelUploadFileById(messageId) {
  // 取消ID为messageId的文件上传
  ZX_CLIENT.canelUploadFiles(messageId);
}

# 文件下载

文件下载主要调用ZX_CLIENT.download 或 ZX_CLIENT.downloadExta.download 接口，传入 URL 和下载回调 callback 、文件名 fileName、文件信息 fileData 就可以了

// 下载文件
function download(callback) {
  let url = originalURL(this.message);
  console.log("originalURL：", url);
  let fileName = this.message.content.name
    ? this.message.content.name
    : "undefined";
  fileName = fileName.replace(/[/\\?%*:|"<>]/g, "_");
  let fileData = this.message;
  if (ZX_CLIENT.config.isXP) {
    ZX_CLIENT.download(encodeURI(url), callback);
  } else {
    ZX_CLIENT.download(encodeURI(url), callback, fileName, fileData);
  }
}
// 下载文件另存为
function downloadSaveAs(callback) {
  let url = originalURL(this.message);
  let fileName = this.message.content.name
    ? this.message.content.name
    : "undefined";
  let messageId = this.messageId;
  fileName = fileName.replace(/[/\\?%*:|"<>]/g, "_");
  if (ZX_CLIENT.config.isXP) {
    ZX_CLIENT.downloadExta.download(
      url,
      undefined,
      messageId,
      fileName,
      callback
    );
  } else {
    ZX_CLIENT.downloadExta.download(url, callback);
    // ZX_CLIENT.download(encodeURI(url), callback, fileName, fileData);
  }
}

← 文件夹消息拖拽多选 →