如何利用原生JS实现图片预览加上传(前后端交互)

目录

• 前言
• 效果大致如下
• 前端代码
• 后端代码
• 总结

前言

最近在写vue项目的时候发现了个Vant的一个upload的图片上传的组件，就好奇了一下下，于是萌生了一个自己手写一个图片上传的组件的想法，您猜怎么着，还真给我实现了，那今天就和大家分享一下，大家有兴趣的可以了解一下啦，写进项目中可能会是个加分点哦！！

我们知道文件上传是需要前后端交互的，所以我这边给出前后端代码。 文件上传大致分为以下几个步骤

• 前端文件选择上传的文件类型
• 拿到文件信息
• 将选择的文件（视频或图片）在前端页面预览出来
• 将文件发上传到后端服务器
• 客户端能够访问到上传到服务器端的文件

效果大致如下

前端代码

选择文件（允许多文件）:
 //multiple开启多选
预览图片
上传图片

后端代码

/**
 * 服务入口
 */
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');
var fs = require('fs');
var Koa = require('koa2');
var cors = require('koa2-cors') //解决跨域

var app = new Koa();
var port = process.env.PORT || '3007';
var uploadHost = `http://localhost:3001/uploads/`;
app.use(cors())
app.use(koaBody({
  //koa-body 是一个可以帮助解析 http 中 body 的部分的中间件，包括 json、表单、文本、文件等。
  formidable: {
    //设置文件的默认保存目录，不设置则保存在系统临时目录下  
    uploadDir: path.resolve(__dirname, './static')
  },
  multipart: true // 支持文件上传
}));
app.use(koaStatic(
  //让我们更加快速访问服务中的静态资源
  path.resolve(__dirname, './static')
));
//二次处理文件，修改名称
app.use((ctx) => {
  console.log(ctx.request.files);
  var files = ctx.request.files.files;//得到上传文件的数组
  var result = [];
  console.log(files);
  let baseUrl = 'http://192.168.10.4:3007/'
  if (!Array.isArray(files)) {//单文件上传容错
    files = [files];
  }
  files && files.forEach(item => {
    var path = item.path.replace(/\\/g, '/');
    var fname = item.name;//原文件名称
    var nextPath = path + fname;
    if (item.size > 0 && path) {
      //得到扩展名
      var extArr = fname.split('.');
      var ext = extArr[extArr.length - 1];
      var nextPath = path + '.' + ext;
      //重命名文件
      fs.renameSync(path, nextPath);
      console.log(baseUrl + nextPath.slice(nextPath.lastIndexOf('/') + 1))
      result.push(baseUrl + nextPath.slice(nextPath.lastIndexOf('/') + 1));
    }
  });
  ctx.body = {//向前端返回图片上传后的地址
         "fileUrl":`${JSON.stringify(result)}`
     };
})

app.listen(port, () => {
  console.log('服务已启动3007');
})

总结

代码我都做好详细注释啦，使用到的官方对象的作用我也给你总结出来了给你们偷个懒！！相信大家花点时间看一下就能懂啦，最后我再叨叨几句~

• 前端

• js使用input type ="file"可以上传文件
• 读取文件完成后创建出几个DOM用来预览图片，配置好相应的功能需求
• FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 [File] 或 [Blob] 对象指定要读取的文件或数据。
• readAsDataURL 方法会读取指定的 [Blob]/Blob) 或 [File] 对象。读取操作完成的时候，[readyState] 会变成已完成DONE，并触发 loadend (en-US) 事件，同时 [result] 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
• FormData接口提供了一种方法来轻松构造一组表示表单字段及其值的键/值对，然后可以使用该[XMLHttpRequest.send()]方法向后端发送文件。

• 后端

• 后端这里是使用Koa写的
• 安装koa2-cors防止跨域
• 安装koa-body拿到前端传来的文件，并存在相应的目录下
• 安装Koa-static然后端更加方便的访问到上传的文件地址

到此这篇关于如何利用原生JS实现图片预览加上传的文章就介绍到这了,更多相关JS实现图片预览上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！