Does framework7 have upload component in vue?

I mean how do I get a upload component which can choose file and upload file and support support progress call back.

I will wonder if you would give me a example . thanks.

i dont think it have.
i implemented my own with f7 + vue + vuex + axios.

  uploadFile: (opts, headers) => new Promise((resolve, reject) => {
    const token = vue.cookie.get('XXX')
    var instance = axios.create({
      baseURL: !store.getters.debug ? 'https://my-api' : 'http://localhost:8088/',
      timeout: 300000,
      headers: {'Content-Type': 'text/raw',
        'Authorization': 'Bearer ' + token.headers,
        'Bucket-Id': headers.bucketId
      }
    })
    // show base uploader animation
    instance.interceptors.request.use(function (config) {
      store.commit('TOGGLE_SHOW_UPLOAD_PROGRESS')
      return config
    })
    // hide base uploader animation
    instance.interceptors.response.use(function (response) {
      store.commit('TOGGLE_SHOW_UPLOAD_PROGRESS')
      return response
    }, function (error) {
      store.commit('TOGGLE_SHOW_UPLOAD_PROGRESS')
      return error
    })
    instance({
      method: 'post',
      url: 'UploadFile',
      data: opts,
      // increment uploader animation bar
      onUploadProgress: (progressEvent) => {
        const { loaded, total } = progressEvent
        let progress = parseInt(Math.round((loaded * 100) / total))
        store.dispatch('setUploadProgress', progress)
        // console.log(parseInt(Math.round((loaded * 100) / total)))
      }
    }
    ).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  }),

maybe you can use this code to change it to your needs. you only need axios. i dont know if f7 request method support onUploadProgress or how to use it.

1 Like

thank u pvtallulah, you are so kind. but I just want to use f7 and vue to implement this function .

<input type="file"  @change="uploadAddition"  id="ufile" />

uploadAddition: function () {
    let that = this;
    let $$ = this.Dom7;
    let mainID = that.mainID;
    let url = that.GLOBAL.RequestAddress + "/camel/rest/upload"
    that.setInlineProgress( 0);
    $$('.callback').html("");
    let file = document.getElementById('ufile').files[0];
    let formdata = new FormData();
    formdata.append("file", file);
    
    let xhr = new XMLHttpRequest();
    xhr.open("post", url);
    xhr.responseType = 'json';
    //回调
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            $$('.callback').html(xhr.response.msg);
        }
    }
    //获取上传的进度
    xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
            var percent = event.loaded / event.total * 100;
            that.setInlineProgress( percent);
        }
    }
    xhr.setRequestHeader('AccessToken', sessionStorage.getItem('accessToken'));
    xhr.setRequestHeader('JSESSIONID', sessionStorage.getItem('userToken'));
    //将formdata上传
    xhr.send(formdata);
}

the above is my code.