js自定义实现图片上传

/**
* 自定义图片上传方法 upload
* 采用js原生图片上传 formData
* 采用axios进行提交
* @params
*  object:{
*       picUri:result.imagePathArr[0].url,
*       picName:'user-logo'
*   }
*/

export function uploadImage(config) {
  let { __header, __rootUrl, ...params } = config.data
  Axios.defaults.headers.common['AccessToken'] = __header.accessToken || ''
  Axios.defaults.headers.common['tongdun'] = __header.tongdun || ''
  Axios.defaults.headers.common['currentev'] = __header.currentEnv || ''
  Axios.defaults.headers.common['apiLevel'] = __header.apiLevel || ''
  Axios.defaults.headers.common['deviceType'] = __header.deviceType || ''
  Axios.defaults.headers.common['Version'] = __header.Version || ''
  Axios.defaults.headers.common['deviceModel'] = __header.deviceModel || ''
  Axios.defaults.headers.common['appSource'] = __header.appSource || ''
  Axios.defaults.headers.common['deviceCode'] = __header.deviceCode || ''
  Axios.defaults.headers.common['GPS'] = __header.GPS || ''
  Axios.defaults.headers.common['fingerPrint'] = __header.deviceCode || ''

  let imgType = params.picUri.split(".")[1];
  let headerConfig = {
    headers: {
      'Content-Type': `multipart/form-data`,
      'Accept': '*/*'
    }
  }

  let formData = new FormData()

  let file = {
    uri: params.picUri,
    type: imgType == 'png' ? 'image/png' : 'image/jpeg',
    name: `${params.picName}.${imgType}`
  };

  formData.append('file', file)

  return Axios.post(__rootUrl + config.url, formData, headerConfig).then(result => {
    return result.data
  })
}

项目里采用此方案进行图片上传。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tinymce 是一个基于JavaScript的富文本编辑器,它在网页开发中广泛应用于文本编辑、内容发布等场景。在 tinymce 中,要实现自定义图片上传功能,可以通过插件的方式来进行。 首先,我们需要了解 tinymce 预留的自定义上传接口。 tinymce 提供了`file_picker_callback`接口,可以自定义上传图片的触发方式和上传逻辑。通过这个接口,我们可以按需实现图片上传功能。 具体操作如下: 1. 在页面引入 tinymce 的库文件和插件,确保可以正确加载富文本编辑器。 2. 初始化 tinymce 实例时,需要传入相应的参数,其中包括 `file_picker_callback`接口。该接口会在用户点击插入图片按钮时调用。 3. 将`file_picker_callback`接口指定为一个自定义的方法,用于处理图片上传的逻辑。在该方法中,可以通过一些文件上传框架(如 FormData、jQuery.ajax()等)实现图片的上传,并将上传成功后的图片地址返回给 tinymce 编辑器。 4. 根据返回的图片地址,我们可以在页面上插入图片。 需要注意的是,上传的图片应该保存在服务器端,并返回图片的 URL 地址,然后通过 `editor.insertContent` 方法插入到编辑器中。另外,为了供用户查看已上传的图片,也可以在编辑器上方增加一个图片预览区域。 这样,就完成了在 tinymce 中自定义图片上传的功能。用户可以点击插入图片按钮,选择本地图片并上传,然后在编辑器中显示上传后的图片。 总结起来,要在 tinymce 实现自定义图片上传的功能,需要了解 tinymce 提供的 `file_picker_callback` 接口,并通过该接口自定义图片的上传逻辑和操作。同时,需要将上传后的图片地址插入到编辑器中,使用户能够看到上传的图片。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值