vue开发简单上传图片功能

2024-10-21 20:35:53

本文实例为大家分享了vue实现简单上传图片功能的具体代码，供大家参考，具体内容如下

vue简单的上传个图片的功能，主要代码：

<template>
<div class="plan_list">
    <div class="plan_name Upload_name">企业logo</div>
    <div class='Upload'>
     <input type="file" name="pclogo" id="xdaTanFileImg" @change="xmTanUploadImg()" ref='box' accept="image/*">
     <img src="../../static/img/Authentication/shxy.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs">
    </div>
   </div>
</template>

<script>
export default {
 name: "feedShopping",
 data() {
  return {}
 },

 methods: {

//上传图片
  xmTanUploadImg(){

   var obj=this.$refs.box;//获取元素的dom
   var file = obj.files[0];
   var reader = new FileReader();
   reader.onload = function (e) {

    var img = document.getElementById("avarimgs");//获取图片id

    img.src = e.target.result;//给图片src路径赋值

    //重要：这里可以把获取的src路径的 base64 格式的图片传给后端即可
   }

   reader.readAsDataURL(file)
  },
}
<script>

<style scoped>
#avarimgs,#xdaTanFileImg{
 width: 0.8rem;
 height: 0.8rem;
 border-radius: 0.1rem;
 margin: 0.1rem 0;
 float: right;
}
#xdaTanFileImg{
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
}
.Upload_name{
 line-height: 1rem;
}

</style>

参照之前发布的 jquery上传图片代码更改完整代码

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

vue开发简单上传图片功能

本文实例为大家分享了vue实现简单上传图片功能的具体代码,供大家参考,具体内容如下 vue简单的上传个图片的功能,主要代码: <template> <div class="plan_list"> <div class="plan_name Upload_name">企业logo</div> <div class='Upload'> <input type="file" name=&
Vue实现简单购物车功能

本文实例为大家分享了Vue实现简单购物车功能的具体代码,供大家参考,具体内容如下话不多少,上效果图代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcdn.net/ajax/libs/twit
require.js+vue开发微信上传图片组件

由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou
vue实现简单分页功能

本文实例为大家分享了vue实现简单的分页功能的具体代码,供大家参考,具体内容如下 <template> <div id="pages"> <div class="pages"> <div class="classInfo" v-for="(item,index) in currentPageData" :key="index">
Vue实现简单选项卡功能

本文实例为大家分享了Vue实现简单选项卡的具体代码,供大家参考,具体内容如下 vue-tab-demo App.vue <template> <div id="app"> <Tab/> </div> </template> <script> import Tab from './components/Tab' export default { name: 'App', components:
vue实现简单的购物车功能

本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 1.实现效果: 2.涉及到的知识点: toFixed函数.过滤器.reduce高阶函数.v-bind:disabled.v-if 3.代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-
基于vue开发微信小程序mpvue-docs跳转页面功能

打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面这样加就行了! 然后是用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用总结以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留
vue中使用elementUI组件手动上传图片功能

Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim
vue 使用微信jssdk,调用微信相册上传图片功能

vue 使用微信jssdk 1.引入weixin-js-sdk npm install weixin-js-sdk 使用文档 https://www.npmjs.com/package/weixin-js-sdk 2.配置 vue中微信jssdk配置 import wx from 'weixin-js-sdk' created(){ //微信jssdk配置 let timestamp=new Date().getTime();//时间戳 let noncestr=Math.random().to
Android开发实现的简单计算器功能【附完整demo源码下载】

本文实例讲述了Android开发实现的简单计算器功能.分享给大家供大家参考,具体如下: 这个Android计算器虽然还有点小bug,不过简单的计算功能还是没问题的哦: 先上图看效果比较简单,所以我就没怎么写注释,应该一看就能明白的有不明白的可以发信问我先贴MainActivity.java代码 package com.example.calculator; import android.app.Activity; import android.os.Bundle; import andro

vue开发简单上传图片功能

相关推荐

随机推荐