Изменить позу для загрузки? Реализация el-upload + qiniu-js

JavaScript Vue.js Семь Ниуюн

оelement-uiизel-upload, по фактуissueВ книге тоже много раз упоминается, и многие новички могут не получить приятные в использовании баллы.issueПосле этого большинство из них были напрямую отфильтрованы или закрыты роботами из-за проблем со спецификацией. Например, последний связанныйissueискать оhttp-requestиспользуется, но также был закрыт из-за проблем со спецификацией. Итак, давайте немного более приземленно делимся бизнесом.

0. Чего мы хотим?

Проблема проста: во-первых, нам нужна красивая кожа! ЭтоVueВ основном у нас не было выбора, аelement-uiизel-uploadЭто соответствует вкусу. Во-вторых, нам нужна интересная душа, мы используем хранилище объектов семи скотов, но наша идея состоит в том, чтобы использоватьqiniu-jsЭто официальный SDK. потому чтоel-uploadОткрыта кастомизация метода запроса, так что давайте его трансформируем.

1. Как мы это делаем?

qiniu-js SDK

смотреть прямоДокументация.

На самом деле, почему вы должны использовать SDK Qiniu напрямую, а не использовать метод запроса компонента? Здесь мне нужно объяснить два момента: стабильный, ленивый. То, что Qiniu выпускает, однозначно больше подходит для их же обслуживания, так что устраивайте самиactionах илиdataЧто-то может быть устроено не так, лучше сразу по тому, как дали. Например, с точки зрения использования, если я использую SDK напрямую, мне не нужно беспокоиться о том, как разделить, загрузить и объединить в один файл. Мне просто нужно позволить бэкенду выполнить стратегию загрузки и выпустить ее.token, больше ничего не делать. Есть также браузеры, т.к.Vueиспользуется вместе, так тривиальноwebpackЭто уже было обработано для нас, нам все равно.

Ну, пропустим установку и введение, а сразу посмотрим, как называется метод. Просто посмотрите, что его загрузка осуществляется в виде наблюдателя, черезqiniu.uploadЗарегистрируйте метод, посредством которого подписка — это операция загрузки, а отписка — отмена операции загрузки. Наблюдатель разделится на три метода:next, error, completeКороче говоря, это процесс управления, ошибки и завершение. Эту часть можно написать прямо из документации:

const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe(next, error, complete) // 上传开始

// subscription.unsubscribe() 这个方法可以取消操作

nextМетод получает параметр, который содержит различную информацию о ходе загрузки:

const next = ({ total }) => {
  // 
  const {
    loaded, // 已上传大小，单位为字节。
    total,  // 本次上传的总量控制信息，单位为字节
    percent // 当前上传进度，范围：0～100
  } = total
};

Так что, если у вас нет особых потребностей, просто нужноpercentПросто ловите прогресс.

completeПолучите параметр. Когда загрузка будет завершена, сервер вернет вам содержимое в соответствии с конфигурацией. Конкретное отображение зависит от того, как настроен ваш сервер.

errorКак следует из названия, он предназначен для обработки ошибок при загрузке, и обработка ошибок варьируется от человека к человеку, просто посмотрите на документ напрямую.

Держите это до сих пор, см. позжеel-upload

el-upload

мое предложение посмотретьel-uploadИсходный код позволяет легко понять, как красивый скин и интересная душа работают вместе, когда файл перетаскивается или добавляется к компоненту. Если вы просто хотите понять метод загрузки, просто посмотрите наajaxПодойдет два файла: одинajax.jsEстьupload.vue

Если вы скажете: я не хочу смотреть на исходный код! Затем я хочу объединить метод запроса, который вы написали, да! Есть глупый способ: сначала определить метод для получения параметра, этот метод напрямуюuploadизhttp-requestСвязывать:

{
  template: `<el-upload :http-request="request" />`
  methods: {
    request(obj) { console.log(obj) }
  }
}

До сих пор вы можете видетьel-uploadУпаковав всю запрошенную информацию, вы можете оформить душу в соответствии с этим прекрасным скином. (Eстьissueупомянул оheaderа такжеdataПроблема фактически включена в это)

Но я все же рекомендую посмотреть исходный код, потому что после прочтения исходного кода вы найдете некоторые детали, которые можно использовать позже, такие какupload.vueиз133~143Это несколько строк кода:

onProgress: e => {
  this.onProgress(e, rawFile);
},
onSuccess: res => {
  this.onSuccess(res, rawFile);
  delete this.reqs[uid];
},
onError: err => {
  this.onError(err, rawFile);
  delete this.reqs[uid];
}

而这个时候你就能会知道：噢！我等下可以利用到这个皮囊的进度条显示，成功以及失败的处理。并不需要自己再去引入更多的组件或者更多的回调操作。甚至如果以后不再用“七牛”作为请求方法，组件也可复用不用修改。 так#8291Немного жаль, и если он еще не нашел способ, я надеюсь, что эта статья сможет ему помочь.

3. merge

弄清楚之后，就是把他们“揉起来”。 дляel-uploadМы уже знаем информацию, которую можно использовать, а остальные бизнес-операции будут перенесены.elementОфициальная документация . Сделаем с душой, перед этим заметка: наша команда очень о нормах и обнимашкахclasses + TypeScriptТаким образом, но человек, написавший эту статью, предпочитает использовать ее напрямую.JavaScript, и это должно быть последнее, что нужно большему количеству людей, поэтому "шлаковый код", созданный на этот раз, используетJavaScript,Так:

// upload.js

// token 找后端，obj 这里指代从 el-upload 接收到的 object
export const upload = token => obj => {
  const { file } = obj 

  // 关于 key 要怎么处理自行解决，但如果为 undefined 或者 null 会使用上传后的 hash 作为 key.
  const key = "" 
  
  // 因人而异，自行解决
  const putExtra = {},
        config   = {} 

  const observable = qiniu.upload(file, key, token, putExtra, config)

  // 刚刚得到的信息可以使用了，这样可以使用到 el-upload 的进度条
  const next = ({ total }) => obj.onProgress({ percent: total.percent })

  const error = err => obj.onError(err)

  const complete = res => obj.onSuccess(res)

  const subscription = observable.subscribe(next, error, complete)
  return subscription // 返回以方便取消上传操作
}

Vue.component('upload', {
  template: `<el-upload :http-request="request" />`
  methods: {
    request(obj) {
      // 你怎么搞到token我不管！
      const uploader = upload(token)
      const subscription = uploader(obj) 
    }
  }
})

Это сложная операция, и на этом все, а все остальное — любовь и кастомизация!

Категории