• 图片上传方法

方法名	参数传递	说明
AppUpload	imagepath	imagepath:图片地址

// 图片裁剪
import SimpleCrop from "@/lib/SimpleCrop.js"
// md5
import md5 from "md5"
// OSS依赖
import OSS from "../lib/uploadfile"
// 图片显示回调
const ShowPhoto = function(op){
  /*
   * params: 
   *{
   * uploadUrl: 线上地址
   * imgUrl: 图片 base64
   * }
   */
}
// OSS上传
const Ossupload = async function (data) {
  const client = new OSS({
    region: "oss-cn-chengdu",
    accessKeyId: "accessKeyId",
    accessKeySecret: "accessKeySecret",
    bucket: "kexiaoshuang-oss",
  });
  const headers = {};
  const filename =
    md5(new Date().getTime() + data.size).substring(8, 24) +
    "." +
    data.type.slice(6);
  try {
    const result = await client.put(
      `upload/v2/${new Date().getFullYear()}/${
        new Date().getMonth() + 1
      }/${new Date().getDate()}/${filename}`,
      data,
      { headers }
    );
    return "/" + result.name;
  } catch (e) {
    console.log(e);
  }
};
// 服务器上传
const UploadServe = async function (data) {
  const res = await putRequest(
    "ossparam.txt?t=" + Math.random(6),
    {data}
  );
  return res.data.url
};
const WapCrop: function (params) {
    const Width = params.Width || 380
    const Height = params.Height || 600
    const uploadtype = params.UploadType || 2
    const imgpath = params.ImgPath || ""
    const filesize = params.FileSize || 10240
    if (imgpath === "") {
      let $upload = document.createElement("input")
      $upload.id = "WapCropInput"
      $upload.type = "file"
      $upload.style.display = "none"
      var body = document.querySelector("body")
      body.appendChild($upload)
      $upload.addEventListener("change", function (evt) {
        var files = evt.target.files
        if (files.length > 0) {
          simpleCrop.show(files[0])
        }
        $upload.value = "" //清空 input value
      })
      $upload.click()
    }
    const that = this
    var simpleCrop = new SimpleCrop({
      src: imgpath,
      size: {
        width: Width,
        height: Height,
      },
      visible: imgpath === "" ? false : true,
      cropSizePercent: 1,
      cropCallback: function ($resultCanvas) {
        $resultCanvas.toBlob(async (data) => {
          if (data.size / 1024 > filesize) {
            PublicFn.tips(
              "当前文件大于" +
                (filesize / 1024).toFixed(2) +
                "M,请压缩后再上传",
            )
            return
          }
          var imgURI = $resultCanvas.toDataURL("image/png")
          if (uploadtype == 2) {
            // 上传OSS后拿到线上路径
            ShowPhoto({uploadUrl: await Ossupload(data), imgUrl: imgURI})
          } else if (uploadtype == 1) {
            // 上传线上服务器后拿到线上路径
            ShowPhoto({uploadUrl: await UploadServe(imgURI), imgUrl: imgURI})
          } else {
            // 不上传，只做图片显示
            ShowPhoto({uploadUrl: "", imgUrl: imgURI})
          }
        })
      },
      uploadCallback: function (src) {},
      closeCallback: function () {},
    })
  };
WapCrop({ Width: 600, Height: 380, UploadType: 2, ImgPath, FileSize: 2048 })