zoukankan      html  css  js  c++  java
  • vue 图片上传

    @官方文档 @参考博客1,@参考博客2

    最终效果:

    实现:

    vue init webpack yanan
    cnpm install iview --save

    然后引入iView

    import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    Vue.use(iView)

    删除package.json中的“eslint:recommended”(如果存在)

    启动项目

    cnpm run dev

    至此,访问项目相关路径即可实现上述效果

    项目关键代码:

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    
    Vue.config.productionTip = false
    Vue.use(iView)
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    View Code

    App.vue

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    View Code

    router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import zyn from '@/components/zyn'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/zyn',
          name: 'zyn',
          component: zyn
        }
      ]
    })
    View Code

    zyn.vue

    <template>
      <div class="hello3">
        <Upload name="此处是与接口约定的字段名" :on-success="successImg" action="此处是上传图片接口地址">
          <Button style="border-color:#53CAC3;color: #7F7F7F;" class="title-btn fourSize">上传图片</Button>
        </Upload>
        <img :src="zynimg" />
    
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          zynimg: ''
        }
      },
      methods: {
        successImg (response, file, fileList) {
          // 上传图片成功后回调
          console.log(response)
          if (response.code === 1) {
            this.zynimg = response.data.imgUrl
          }
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      h1,
      h2 {
        font-weight: normal;
      }
    
      ul {
        list-style-type: none;
        padding: 0;
      }
    
      li {
        display: inline-block;
        margin: 0 10px;
      }
    
      a {
        color: #42b983;
      }
    </style>
    View Code

    Helloworld.vue是默认生成的,没什么用,不贴了

    考虑到一部分猿可能需要完整代码,因此也上传了

    vueUpload.zip

    其中node_modules文件夹太大,本案例中也没多大作用,没上传

  • 相关阅读:
    jQuery Validate验证框架详解
    struts异常:No result defined for action
    spring问题:java.lang.NoClassDefFoundError: org/aspectj/weaver/tools/PointcutPrimitive
    Mybatis异常:java.lang.ClassNotFoundException: org.mybatis.spring.SqlSessionFactoryBean
    HttpServletRequest cannot be resolved to a type。
    struts文件异常Included file cannot be found
    JS中获取session中传过来的值对象
    [JS]Math.random()
    用photoshop将图片四角变成圆角
    SSH的jar包下载地址
  • 原文地址:https://www.cnblogs.com/yanan7890/p/12939252.html
Copyright © 2011-2022 走看看