精华内容
下载资源
问答
  • vue上传图片到服务器

    千次阅读 2018-06-30 12:18:09
    vue上传图片到服务器 我们做的商家管理系统需要在添加一道菜的时候把图片上传到服务器, 流程大概是这样子的: 搭建一个文件服务器(可以与你的网站后台放在同一台物理机上) 网站后台提供上传图片的API 前端...

    vue上传图片到服务器


    我们做的商家管理系统需要在添加一道菜的时候把图片上传到服务器,
    流程大概是这样子的:

    1. 搭建一个文件服务器(可以与你的网站后台放在同一台物理机上)
    2. 网站后台提供上传图片的API
    3. 前端接收图片后把图片转成base64字符串,调用API上传图片
    4. 后台接收到base64,把base64转成图片,存到文件服务器里面,根据存储的路径生成图片的url
    5. 后台把图片的url返回给前端
    6. js接收到url之后把url赋给<img>src

    本文仅介绍前端需要的操作,即步骤3、6

    <template>
        <div>
            <!-- 选择图片 -->
            <input type="file"
                   accept="image/*"
                   @change="chooseImg" />
            <!-- 预览图片 -->
            <canvas ref="imgPreview"
                    height="0"
                    width="0"></canvas>
            <!-- 提交图片 -->
            <button @click="uploadImg">提交图片</button>
            <!-- 通过后台返回的url向文件服务器请求图片 -->
            <img :src="imgUrlFromServer">
        </div>
    </template>
    <script>
    import axios from 'axios'
    
    export default {
        name: 'uploadImg',
        data () {
            return {
                imgUrlFromServer: '#',
                base64: ''
            }
        },
        methods: {
            chooseImg (event) {
                let file = event.target.files[0]
                let reader = new FileReader()
                let img = new Image()
                // 读取图片
                reader.readAsDataURL(file)
                // 读取完毕后的操作
                reader.onloadend = (e) => {
                    img.src = e.target.result
                    // 这里的e.target就是reader
                    // console.log(reader.result)
                    // reader.result就是图片的base64字符串
                    this.base64 = reader.result
                }
                // 预览图片
                let canvas = this.$refs['imgPreview']
                let context = canvas.getContext('2d')
                img.onload = () => {
                    img.width = 100
                    img.height = 100
                    // 设置canvas大小
                    canvas.width = 100
                    canvas.height = 100
                    // 清空canvas
                    context.clearRect(0, 0, 100, 100)
                    // 画图
                    context.drawImage(img, 0, 0, 100, 100)
                }
            },
            uploadImg () {
                axios.post('http://1.2.3.4:8080/uploadImg', {
                    img: this.base64
                }).then(response => {
                    this.imgUrlFromServer = response.data.imgUrl
                })
            }
        }
    }
    </script>

    在选择图片后,<canvas>里会有图片的预览,当把图片上传到服务器后,前端收到图片的url,<img>里就会显示刚才添加的图片

    展开全文
  • @change="uploadFile($event)" ref="avatarInput" accept="image/*" /> 2:通过new FileReader()把上传图片转为base64的格式,将转换后的数据给data中的imageUrl,将imageUrl作为参数提交后台 参考文章:...

    1:传文件流,转化格式传给后台

    参考文章:https://www.jb51.net/article/119155.htm

    https://www.cnblogs.com/lqqchangeload/p/12870418.html

    https://blog.csdn.net/AK852369/article/details/102641619?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.compare

       <div class="update">
          <input
            type="file"
            @change="uploadFile($event)"
            ref="avatarInput"
            accept="image/*"
          />
        </div>

    <script>
     methods: {
        uploadFile(e) {
          var file = e.target.files[0];
          var formData = new FormData();
          //这里是生成链接需传的参数
          formData.append("file", file);

          formData.append("key", "Gn1xVdagWO");
          this.$axios({
              method: "post",
              url:"uploadFile",
              data: formData    
            })
            .then((res)=> {
            //获取链接再赋值就行了
            console.log(res.data.info.url)
            });
        },
    </script>
     

    2:通过new FileReader()把上传的图片转为base64的格式,将转换后的数据给data中的imageUrl,将imageUrl作为参数提交到后台

    参考文章:https://www.jianshu.com/p/d876f045127a

     

     

     

    展开全文
  • vue wangEditor上传图片到服务器

    千次阅读 2019-02-27 16:21:08
    npm install wangeditor -D import E from 'wangeditor'; const editor = new E('#editor'); editor.customConfig.customUploadImg = (files, insert) =&gt; { const formData = new FormData();...

    npm install wangeditor -D

    import E from 'wangeditor';
    
    const editor = new E('#editor');
    editor.customConfig.customUploadImg = (files, insert) => {
      const formData = new FormData();
      formData.append('file', files[0]);
      formData.append('path', 'files/ne-icev3-dashboard/content/content/');
      this.$axios._api_gateway.post('/file-service/upload/ali', formData).then(res => {
        const result = res.data;
        if (result.code === '000000') {
          const data = result.data;
          insert(data);
        }
      });
    };
    editor.create();
    
    展开全文
  • Vue项目上传到Linux服务器 1. vue项目目录中执行打包命令 npm run build 2.打包完毕后会自动生成一个dist文件夹 里面就是解析后的静态文件资源 3. 压缩里面的文件 不要dist文件夹 方便上传后直接使用 4.使用...

    Vue项目上传到Linux服务器

    1. vue项目目录中执行打包命令

    npm run build
    

    2.打包完毕后会自动生成一个dist文件夹 里面就是解析后的静态文件资源

    在这里插入图片描述

    3. 压缩里面的文件 不要dist文件夹 方便上传后直接使用

    在这里插入图片描述

    4.使用xshell连接服务器 查看nginx的文件目录并打开

     ps –ef | grep nginx
    

    在这里插入图片描述
    == 打开到/usr/local/nginx/html 就是nginx网络服务的首页地址==

    4.1. 删除index.html文件

    rm –f  index.html
    

    4.2 删除 文件夹以及文件夹中的文件 采用递归删除

    rm –rf  文件夹名称
    

    5. 服务器安装RZ文件上传工具

    yum –y install lrzsz
    

    安装完毕就可以在html 目录下面执行 rz 命令
    在这里插入图片描述
    选择压缩文件 打开即可上传到html目录下

    6. 解压DIST压缩文件

    unzip dist.zip
    

    7. 本地打开浏览器输入服务器的公网ip即可访问index.html文件

    在这里插入图片描述

    菜鸟起步!大神绕道

    展开全文
  • 项目打包后加载时间及大小 ...vue-router路由懒加载(解决vue项目首次加载慢)也叫延迟加载,即在需要的时候进行加载,随用随载。简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 像vu...
  • 前端vue <div class="layui-upload layui-input-inline"> 上传图片</button> <div class="layui-upload-list"> //这个是为了在线预览,如果不需要可以去除 (this)" name="license" v-model="t04Vehicle.license" src...
  • vue-quill-editor上传图片到服务器

    千次阅读 2019-03-05 11:03:32
    vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器 install npm npm install vue-quill-editor-upload --save 基本使用 &amp;lt;template&amp;gt; &amp;lt;!-- bidirectional data ...
  • Vue+WangEditor富文本 批量上传图片到服务器 富文本
  • vue项目打包上传服务器 PS:因为我现在还是个学生,所以服务器是自己去阿里云上租了两年的服务器,挺便宜的,上传之前要准备好Xshell 5 第一步 Xshell 5创建会话属性 名称就是起的一个你能记住的名字就行了,...
  • 1.上传图片的地方 <input type="file" @change="Preview($event)" accept="image/*" ref="showinput">2.调用方法 //input 发生改变的时候触发Preview(ev){ // const self=this; const file=ev.target.files...
  • <!-- vant代码 --> <van-uploader :after-read="Uploader" > <img width="37px" :src="data.avatar" alt="">...用到vant的api函数 after-read 文件读取完成后... // 上传图片 Uploader(e){ console.
  • 目录前言上传方式Vue上传图片到七牛云Django上传图片七牛云 前言 在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,...
  • 选择图片时裁剪,缩放的效果 点击完成之后的预览效果 实现步骤 第1步: npm i clipic --s 第2步 <template> <div> <div class="photo"> <img :src="base64" /> <input type...
  • 主要介绍了Vue 图片压缩并上传服务器功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue上传图片到7牛云

    2018-11-14 16:10:52
    inputChange(event){ //图片上传的事件 var file = event.target.files[0]; var formData = new FormData(); formData.append('file', file); formData.append('token', this.qiniuToken); //在后台获取7牛的...
  • 主要介绍了vue 实现剪裁图片上传服务器功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 前几天因项目,前台用vue+elemnt上传图片到阿里云服务器。(因为前台传来的图片时,把图片内容转化为了base64.)后台应该怎么接受。核心代码如下: ` @PostMapping("/upload") public String upload(@RequestBody ...
  • 利用ftp,vue上传文件至服务器

    千次阅读 2019-04-26 09:59:33
    该功能为通过前端上传文件,后端通过...(windows的ftp配置)部署服务的服务器和存文件的服务器不是一台,所以没有把文件存工程目录下static里面。 前端上传代码如下: <el-upload ref="upload" v-show="form....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,148
精华内容 4,459
关键字:

vue上传图片到服务器

vue 订阅