appcan图片上传最新实现方式

今天我来说说我最新在做的新的模块，意见反馈，其中用appcan实现图片上传是一个技术难点。所以，这一节，我就来说一说appcan实现图片上传。
首先，我们要先搞清楚图片上传的具体步骤和难点。
先来说说图片上传的步骤：

图片上传的步骤：
1.当我点击添加图片的按钮时，去打开图片选择器
2.当我选择完图片，点击完成的时候，我要判断是否有选中的图片，如果有的话，选中了图片的路径是什么
3.得到了选中的图片，就要去创建上传对象，并设置头文件
4.如果上传对象创建成功，就可以去上传；如果没有创建成功，就继续创建上传对象
5.上传对象如果成功，也就是说明后台已经可以收到上传的图片，此时前台回显图片

接着来说一说图片上传的难点，即注意点：

图片上传的注意点：
1.ios需要配置读取相册的权限
2.后台如果使用request.getInputStream的方式一定要记得把流里面的前四行去掉。（后台注意）
3.方法参数的类型得正确，setHeader方法里面的参数必须是字符串类型，number类型是不可以的，这点得注意。
4.不要使用input type=”file”，最好是直接用点击事件触发uexImage.openPicker的方法

好的，最后我们来说说代码的具体实现，请大家阅读代码的同时，参考上面对于上传步骤的理解

/*
*  图片上传
* */
// 照片选择器被关闭的监听方法
let filePath = ''
uexImage.onPickerClosed = function (info) {
  let isCancelled = JSON.parse(info).isCancelled // 判断是否因为取消关闭
  if (!isCancelled) {
    let data = JSON.parse(info).data
    for (let i = 0; i < data.length; i ++) {
      filePath = data  // 文件路径
      let fileName = filePath.substr(filePath.lastIndexOf('/'))  // 文件名
      let ext = fileName.split('.')[1]  // 后缀名
      // 创建上传对象
      let uploader = uexUploaderMgr.create({
        url : '',
        type: 1
      })
      if (!uploader) {
        // 创建失败
        let uploader = uexUploaderMgr.create({
          url : '',
          type: 1
        })
      } else {
        // 创建成功
        // 设置头文件
        setHeader (uploader, ext, fileName)
        // 文件上传
        uexUploaderMgr.uploadFile(uploader, filePath, 'imageField', 1)
      }
    }
  }
}
// 图片上传监听
uexUploaderMgr.onStatus = function (uploader, fileSize, percent, serverPath, status) {
  switch (status) {
    case 0:
      // 上传中
      break;
    case 1:
      // 上传成功
      console.log("上传成功,服务器serverPath:"+serverPath);
      console.log(serverPath)
      let fileName = '' + JSON.parse(serverPath).data.filename
      vm.$store.commit('SET_CHOSEIMG', fileName)
      // 关闭创建对象
      uexUploaderMgr.closeUploader(uploader)
      break;
    case 2:
      // 上传失败
      console.log('上传失败')
      break;
  }
}
// 设置头文件
function setHeader (uploader, ext, fileName) {
  let key = '9778a58bd47942d928a21a5865dcf1fe'
  let timestamp = formatCurrentDate()    // 当前时间，必须是yyyy-MM-dd HH:mm:ss格式
  let mathRandom = '0.'+(+new Date()+'').split('').reverse().join('')   // 0-1之间的随机数，小数点最少保留4位
  let ak = hexMd5(hexMd5(timestamp + key + mathRandom))
  let headJson = {
    'timestamp': timestamp,
    'mathRandom': mathRandom,
    'ak': ak,
    'ext': '.' + ext
  }//（这是我项目里面需要传的字段）
  uexUploaderMgr.setHeaders(uploader, JSON.stringify(headJson))
}

over

appcan图片上传最新实现方式

猜你喜欢