resource上传文件到七牛的实例代码,nodejs利用aj
分类:计算机编程

这个是最近需要做的一个功能,在网上也查看了很多相关的文章,基本上大同小异,在这里整理一下。

Vue2.0利用vue-resource上传文件到七牛的实例代码,vue2.0vue-resource

本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助

关于上传,总是有很多可以说道的。

16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么呢?因为兼容性。没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器。否则,上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾,幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

上传流程

图片 1

图不重要看文字

input[type="file"] change事件触发后,先去(如果是图片,可以同时通过FileReader以及readAsDataURL将图片预览在页面上)后台请求七牛的上传token,将拿到的token和key以及通过change传递过来的files一起append到formData中。然后将formData通过post传递给七牛,七牛在处理后将返回真正的文件地址

获取token

const qiniu = require('qiniu')
const crypto = require('crypto')
const Config = require('qiniu-config')

exports.token = function*() {
  //构建一个保存文件名
  //这里没有处理文件后缀,需要自己传递过来,然后在这里处理加在key上,非必须
  const key = crypto.createHash('md5').update(((new Date()) * 1   Math.floor(Math.random() * 10).toString())).digest('hex')
  //Config 七牛的秘钥等配置
  const [ACCESS_KEY, SECRET_KEY, BUCKET] = [Config.accessKey, Config.secretKey, Config.bucket] 
  qiniu.conf.ACCESS_KEY = ACCESS_KEY
  qiniu.conf.SECRET_KEY = SECRET_KEY
  const upToken = new qiniu.rs.PutPolicy(BUCKET   ":"   key)
  try {
    const token = upToken.token()
    return this.body = {
      key: key,
      token: token
    }
  } catch (e) {
    // throw error
  }
}

//假设api 地址是 /api/token 

上传组件 upload.vue

<template>
  <label class="mo-upload">
    <input type="file" :accept="accepts" @change="upload">
    <slot></slot>
  </label>
</template>
<style lang="scss">
  .mo-upload {
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    input[type="file"] {
      display: none;
    }
    .mo-upload--label {
      display: inline-block;
      position: relative;
    }
  }
</style>
<script>
  export default {
    name : 'MoUpload',
    props : {
      accepts : { //允许的上传类型
        type : String,
        default : 'image/jpeg,image/jpg,image/png,image/gif'
      },
      flag : [String, Number], //当前上传标识,以便于在同一个监听函数中区分不同的上传域
      maxSize : {
        type : Number,
        default : 0 //上传大小限制
      }, 
    },
    methods: {
      upload (event) {
        let file = event.target.files[0]
        const self = this
        const flag = this.flag
        if (file) {
          if (this.maxSize) {
            //todo filter file
          }
          //filter file, 文件大小,类型等过滤
          //如果是图片文件
          // const reader = new FileReader()
          // const imageUrl = reader.readAsDataURL(file)
          // img.src = imageUrl //在预览区域插入图片

          const formData = new FormData()
          formData.append('file', file)

          //获取token
          this.$http.get(`/api/token/`)
          .then(response => {
            const result = response.body
            formData.append('token', result.token)
            formData.append('key', result.key)
            //提交给七牛处理
            self.$http.post('https://up.qbox.me/', formData, {
              progress(event) {
                //传递给父组件的progress方法
                self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag) 
              }
            })
            .then(response => {
              const result = response.body
              if (result.hash && result.key) {
                //传递给父组件的complete方法
                self.$emit('complete', 200 , result, flag)
                //让当前target可以重新选择
                event.target.value = null
              } else {
                self.$emit('complete', 500, result, flag)
              }
            }, error => self.$emit('complete', 500, error.message), flag)
          })
        }
      }
    }
  }
</script>

父组件调用

<template>
  <section>
    ...
    <figure class="upload-preview">
      <img :src="thumbnail" v-if="thumbnail"/>
    </figure>
    <mo-upload flag="'thumbnail'" @complete="uploadComplete" @progress="uploadProgress">
      <a>选择图片文件<i class="progress" :style="{width:progress   '%'}"></i></a>
    </mo-upload>
    ...
  </section>
</template>
<script>
  import MoUpload from 'upload'
  export default {
    components : {
      MoUpload,
    },
    data () {
      return {
        thumbnail : null,
        progress : 0 //上传进度
      }
    },
    methods : {
      uploadProgress (progress, flag) {
        //这里可以通过回调的flag对不同上传域做处理
        this.progress = progress < 100 ? progress : 0;
      },
      uploadComplete(status, result, flag) {
        if (status == 200) { //
          this.thumbnail = `domain.com/${result.key}` //七牛域名   返回的key 组成文件url
        } else {
          //失败处理
        }
      },
    }
  }
</script>

resource上传文件到七牛的实例代码,nodejs利用ajax实现网页无刷新上传图片实例代码。小结

相比于FILEApi 或者其他上传组件,这种方法代码量最小。但是缺点也是显而易见的,大量html5 API的使用,势必会回到兼容性这个老大难上来,慎重的选择性使用吧‘

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮...

nodejs利用ajax实现网页无刷新上传图片实例代码,

通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转。

利用ajax技术和FormData()对象可以有效的解决这个问题

废话不多说 直接上关键代码:

html部分

<div class="form-group">
  <label>File input</label>
  <input type="file" name="file" id="file">
  <p id="result"></p>
  <img id="img" src="">
</div>
<button id="upload" class="btn btn-default">提交</button>

这里注意input标签的type="file"

js部分:

function uploadFile(){
 var file = document.getElementById("file")
 var formData = new FormData();
 formData.append('file',file.files[0]);
 $.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  // async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data){
   if(200 === data.code) {
    $('#result').html("上传成功!");
    $('#img').attr('src',data.data);
   } else {
    $('#result').html("上传失败!");
   }
   console.log('imgUploader upload success');
  },
  error: function(){
   $("#result").html("与服务器通信发生错误");
  }
 });
}

function postPage() {
    var uploada = document.getElementById('upload');
    uploada.addEventListener("click",function () {
      uploadFile();
    },false);
}

window.onload = function () {
  postPage();
}

nodejs部分:

var storage = multer.diskStorage({
  destination: function (req, file, cb){
    cb(null, './public/images')
  },
  filename: function (req, file, cb){
    cb(null, file.originalname)
  }
});
var upload = multer({
  storage: storage
});
router.post('/upload', upload.single('file'), function (req, res, next) {
  var url = 'http://'   req.headers.host   '/images/'   req.file.originalname
  res.json({
    code : 200,
    data : url
  })
});

multer是express官方推荐的文件上传中间件。

文件上传有以下方法

upload.single(‘file'), //适用于单文件上传。
upload.array(‘file',num), //适用于多文件上传,num为最多上传个数,上传文件的数量可以小于num。

同时还提供了混合上传,比如A类文件1个,B类文件2个。官方API有详细说明。

file为上传字段名称,当使用form表单submit方式上传时,必须与表单上传的name属性保持一致。

对上传文件大小限制,名称限制等均可在limits中加上,具体可加属性,请参考官方api。

multer官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转。...

在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法。

一:首先是html部分

html代码:

二:就是去接收和处理上传的文件了。php部分

       请上传图片         
//文件存放的路径$save_path = "/upload/"; //文件存放的文件夹$save_files = $this->geturl();这个是以年月日新建的文件夹,仅供参考。//先检查当前文件夹是否存在,如不存在,创建文件夹function geturl;$month= date;$str = $year.$month.$day;if(strtoupper=='WIN'){$path = getcwd() . "/upload/".$str;}else{$path = "/mnt/erp/".$str;}if//判断文件夹是否存在{mkdir;}//return $path."/";return $str."/";}//这个是上传文件到需要保存的位置,if (!@move_uploaded_file($_FILES[$upload_name]["tmp_name"], $save_path.$file_path)) {$error = "error|上传文件错误.";exit;}

js代码:

下面开始获取你上传的excel数据了

//实时显示该图片在页面 great(){ document.getElementById.onchange = function () { var imgFile = this.files[0]; var fr = new FileReader(); fr.onload = function () { document.getElementById.src = fr.result; }; fr.readAsDataURL; } },
//获取上传表格的数据$file_name = $save_path.$file_path; //获取上传文件的地址名称require_once APPPATH . 'views/IDC/config/PHPExcel.php'; require_once APPPATH . 'views/IDC/config/PHPExcel/IOFactory.php';require_once APPPATH . 'views/IDC/config/PHPExcel/Cell.php';$objReader = PHPExcel_IOFactory::createReader; //建立reader对象$objPHPExcel = $objReader->load;$sheet = $objPHPExcel->getSheet();$highestRow = $sheet->getHighestDataRow(); // 取得总行数$highestColumn_num = PHPExcel_Cell::columnIndexFromString($sheet->getHighestDataColumn; //列数//$columns = PHPExcel_Cell::getColumn;$columns = array('A','B','C','D','E','F','G');$arr_result = array();$dealer_element = array();for ($j = 2; $j <= $highestRow; $j  ) {for ($k = 0; $k < count {//读取单元格$value = $objPHPExcel->getActiveSheet()->getCell->getValue();//这个就是获取每个单元格的值$value = trim;if  {$value = NULL;}$dealer_element[$k] = $value;//这里可以根据要求,做一些数据的验证}$arr_result[$j] = $dealer_element;}echo json_encode;

js代码部分说明:因为是在vue的methods方法中申明的函数,所以还需要在mounted 方法中使用this.great()挂载该方法。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家

图片上传部分的js代码:

imageSubmit(){ let x = document.getElementById.files[0]; console.log; let params = new FormData() ; //创建一个form对象 params.append; //append 向form表单添加数据 //添加请求头 通过form添加的图片和文件的格式必须是multipart/form-data let config = { headers:{'Content-Type':'multipart/form-data'} }; this.$axios.post("/user/image",params,config) .then{ console.log; this.imageSave = res.data.image; sessionStorage.setItem('headImg',this.imageSave); //将图片保存,并能够在其他地方加载显示 router.go; //刷新页面,头像改变 }.bind .catch { console.log } },

最终效果图:

注:在后来的开发过程中发现,上传图片在上传服务器前在页面加载可以使用

var windowURL = window.URL || window.webkitURL;

以上这篇vue中使用axios post上传头像/图片并实时显示到页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本文由澳门新葡8455手机版发布于计算机编程,转载请注明出处:resource上传文件到七牛的实例代码,nodejs利用aj

上一篇:手机号的相关代码,Python实现随机生成手机号及 下一篇:没有了
猜你喜欢
热门排行
精彩图文