使用@uppy/core和@uppy/transloadit实现指定路径图片上传及密钥配置

冗余模块清理 #

先移除不需要的Webcam、Instagram相关代码，同时修正原代码中Dashboard组件的引入错误：

1. 删除Webcam、Instagram的require引入语句
2. 删除.use(Instagram(...))、.use(Webcam(...))两行配置
3. 把Dashboard的引入改为require('@uppy/dashboard')

指定本地图片上传配置 #

浏览器环境出于安全限制，无法直接通过本地路径读取用户磁盘文件，根据你的运行场景选择对应方案：

场景1：Node.js/Electron等可访问本地文件系统的环境 #

const fs = require('fs')
const path = require('path')

// 初始化Uppy后读取文件添加到上传队列
const fileBuffer = fs.readFileSync(path.resolve(__dirname, './assets/my_logo_v2.png'))
uppy.addFile({
  name: 'my_logo_v2.png',
  type: 'image/png',
  data: new Blob([fileBuffer], { type: 'image/png' })
})

// 自动触发上传
uppy.upload()

场景2：浏览器前端环境 #

将图片放入项目静态资源目录，导入后转成Blob对象添加：

// 项目打包工具支持导入图片的场景
import myLogo from './assets/my_logo_v2.png'

// 初始化Uppy后拉取图片资源添加到上传队列
fetch(myLogo)
  .then(res => res.blob())
  .then(blob => {
    uppy.addFile({
      name: 'my_logo_v2.png',
      type: 'image/png',
      data: blob
    })
    uppy.upload()
  })

如果不需要交互界面，你也可以直接移除Dashboard组件，不用渲染UI直接静默上传。

Transloadit密钥配置 #

• authKey直接替换Transloadit插件配置中params.auth.key的占位值YOUR_TRANSLOADIT_API_KEY即可。
• 重要提示：authSecret绝对不可以直接写在前端代码中，泄露后会导致你的Transloadit账号被恶意调用。如果需要开启签名认证，需要在你的后端服务生成签名和过期时间参数，再传入前端Transloadit插件的配置项中。如果仅为本地测试使用，不需要配置authSecret，仅填authKey即可正常运行。

修改后完整示例代码（浏览器场景） #

const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/dashboard')
const Transloadit = require('@uppy/transloadit')

// 导入本地图片
import myLogo from './assets/my_logo_v2.png'

const uppy = new Uppy({
  debug: true,
  autoProceed: false,
  restrictions: {
    maxFileSize: 1024 * 1024 * 1024,
    maxNumberOfFiles: 2,
    minNumberOfFiles: 1,
    allowedFileTypes: ['image/*']
  },
  locale: {
    strings: {
      youCanOnlyUploadFileTypes: 'You can only upload images'
    }
  }
})

uppy
  .use(Transloadit, {
    params: {
      auth: {
        key: '替换为你的authKey'
      },
      steps: {
        resize: {
          robot: '/image/resize',
          width: 250,
          height: 250,
          resize_strategy: 'fit',
          text: [
            {
              text: '© Transloadit.com',
              size: 12,
              font: 'Ubuntu',
              color: '#eeeeee',
              valign: 'bottom',
              align: 'right',
              x_offset: 16,
              y_offset: -10
            }
          ]
        }
      }
    },
    waitForEncoding: true
  })
  .use(Dashboard, {
    inline: true,
    maxHeight: 400,
    target: '#uppy-dashboard-container',
    note: 'Images and video only, 1–2 files, up to 1 MB'
  })
  .on('transloadit:result', (stepName, result) => {
    const file = uppy.getFile(result.localId)
    var resultContainer = document.createElement('div')
    resultContainer.innerHTML = `
      <div>
        <h3>Name: ${file.name}</h3>
        <img src="${result.ssl_url}" /> <br />
        <a href="${result.ssl_url}">View</a>
      </div>
    `
    document
      .getElementById('uppy-transloadit-result')
      .appendChild(resultContainer)
  })

// 添加本地图片并触发上传
fetch(myLogo)
  .then(res => res.blob())
  .then(blob => {
    uppy.addFile({
      name: 'my_logo_v2.png',
      type: 'image/png',
      data: blob
    })
    uppy.upload()
  })

内容的提问来源于stack exchange，提问作者nullUser