基于vue axios element-ui 的 demo

什么是axios?

       axios是一个基于Promise的HTTP库,能在浏览器和NodeJS中使用。

 

axios特性?

 

  1. 从浏览器中创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换 JSON 数据
  8. 客户端支持防御 XSRF

 

以上来自@ https://www.kancloud.cn/yunye/axios/234845

 

咱们看一下哈,首先基础的,请求肯定是有的,但是除了请求,多了Promise,多了拦截,多了对请求和响应数据的处理。

 

请求?

       我这里以axios(config)为例子

       其中config可以包括以下内容(来自@ https://www.kancloud.cn/yunye/axios/234845

      

{
  url: '/user',

  method: 'get',

  baseURL: 'https://some-domain.com/api/',

  transformRequest: [function (data) {

    return data;

  }],



  transformResponse: [function (data) {

    return data;

  }],

  headers: {'X-Requested-With': 'XMLHttpRequest'},

  params: {

    ID: 12345

  },

  paramsSerializer: function(params) {

    return Qs.stringify(params, {arrayFormat: 'brackets'})

  },

  data: {

    firstName: 'Fred'

  },

  timeout: 1000,

  withCredentials: false,

  adapter: function (config) {  },

  auth: {

    username: 'janedoe',

    password: 's00pers3cret'

  },

  responseType: 'json',

  xsrfCookieName: 'XSRF-TOKEN',

  xsrfHeaderName: 'X-XSRF-TOKEN',

  onUploadProgress: function (progressEvent) {  },

  onDownloadProgress: function (progressEvent) {  },

  maxContentLength: 2000,

  validateStatus: function (status) {

    return status >= 200 && status < 300;

  },

  maxRedirects: 5,

  httpAgent: new http.Agent({ keepAlive: true }),

  httpsAgent: new https.Agent({ keepAlive: true }),

  proxy: {

    host: '127.0.0.1',

    port: 9000,

    auth: : {

      username: 'mikeymike',

      password: 'rapunz3l'

    }

  },

  cancelToken: new CancelToken(function (cancel) {

  })

}

 

有点多哈,咱们先来看看最简单的;以上config中,url是必须的,也就是说最简单的一个axios请求就是:axios( ‘url’ ); 默认的请求方法是get

 

axios 全局请求配置?

axios通过 axios.defaults.* 来配置全局的axios config

比如,你想要配置全局的默认请求时间和请求头:

axios.defaults.timeout = 5000;

axios.defaults.headers.* = *;

 

config实例里的属性会覆盖掉defaults的默认配置

 

axios请求拦截?

       在请求或响应被 then 或 catch 处理前拦截它们。

       也就是说,拦截器就是处理中间的HTTP的陈咬金。

 

// 添加请求拦截器
axios.interceptors.request.use(function(config){
// 在发送请求之前做些什么    
return config; 
},
 
function(error){    
// 对请求错误做些什么    
return Promise.reject(error);  
});

// 添加响应拦截器
axios.interceptors.response.use(function(response){    
// 对响应数据做点什么    
return response;  
},
 function(error) {    
// 对响应错误做点什么    
return Promise.reject(error);  
});

     

实际操作?

       这里我用 element-ui 和 axios 来做一个 demo

       github代码地址:

https://github.com/JJ0Huang/vueDemo.git

 

 

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vue中使用Element UI上传图片并预览可以按照以下步骤进行: 1. 首先,在项目中安装Element UIaxios: ``` npm install element-ui axios --save ``` 2. 在main.js中引入Element UIaxios,并使用: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import axios from 'axios' Vue.use(ElementUI) Vue.prototype.$axios = axios ``` 3. 在组件中使用`<el-upload>`组件进行文件上传,并使用`<el-image>`组件进行预览: ```html <template> <div> <el-upload action="/api/upload" :on-success="handleSuccess" :on-preview="handlePreview" list-type="picture-card"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <el-image :src="imageUrl" :preview-src-list="previewImages"></el-image> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, imageUrl: '', previewImages: [] }; }, methods: { handleSuccess(response) { if (response.status === 200) { this.imageUrl = response.data.url; this.previewImages.push(response.data.url); } }, handlePreview(file) { this.dialogVisible = true; this.imageUrl = file.url; this.previewImages = [file.url]; } } } </script> ``` 4. 在服务器端设置相应的文件上传接口,例如使用Node.js和express: ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/api/upload', upload.single('file'), (req, res) => { // 处理上传文件并返回文件URL const file = req.file; const url = `http://example.com/${file.filename}`; res.send({ url }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 上述代码实现了一个简单的上传图片并预览的功能,具体可根据实际需求进行调整和扩展。 ### 回答2: 在Vue中使用Element UI上传图片并预览可以按照以下步骤进行: 1. 首先,在项目中引入Element UI组件库,并在需要使用的组件中进行注册。 ```js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 2. 创建一个上传组件,并初始化需要的数据,如图片列表和上传接口等。 ```vue <template> <div> <el-upload action="/your-upload-url" :on-success="handleSuccess" :file-list="fileList" :on-remove="handleRemove" multiple > <el-button size="small" type="primary"> 选择图片 </el-button> </el-upload> <el-image v-for="(file, index) in fileList" :key="index" :src="file.url" :preview-src-list="previewList" fit="cover" style="width: 100px; height: 100px;" ></el-image> </div> </template> <script> export default { data() { return { fileList: [], // 上传的文件列表 previewList: [] // 预览图片列表 } }, methods: { handleSuccess(response, file, fileList) { // 上传成功的回调函数 fileList[fileList.length - 1].url = URL.createObjectURL(file.raw) this.previewList = fileList.map(file => file.url) }, handleRemove(file, fileList) { // 上传文件移除的回调函数 this.previewList = fileList.map(file => file.url) } } } </script> ``` 在上述代码中,el-upload组件负责上传图片,action属性指定上传图片的接口地址,on-success属性可以监听上传成功的事件,并通过handleSuccess方法返回上传成功后的处理方式。file-list属性用于展示上传成功的文件列表,并且绑定了on-remove属性来处理上传文件的移除事件。 el-image组件用于展示预览图片,v-for指令遍历渲染fileList数组中的每张图片,通过src属性绑定图片的地址,在handleSuccess方法中将上传成功的文件通过URL.createObjectURL方法生成临时的URL作为图片的地址。同时,preview-src-list属性绑定了previewList数组,用于展示预览图片的列表。 这样,当用户选择图片并上传成功后,页面将会展示上传的图片,并提供预览功能。 ### 回答3: 使用Element UI库实现图片上传并预览的步骤如下: 1. 首先,在项目中引入Element UIVue插件。 ``` import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 2. 在Vue组件中,添加一个上传组件和一个用于预览图片的容器。 ``` <template> <div> <!-- 图片上传组件 --> <el-upload class="upload-demo" action="/your-upload-api" <!-- 上传图片的接口地址 --> :on-success="handleUploadSuccess" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> <!-- 图片预览容器 --> <div class="preview-container"> <img :src="imageUrl" v-if="imageUrl" alt="预览图片" /> </div> </div> </template> <script> export default { data() { return { imageUrl: '' // 预览图片的URL }; }, methods: { handleUploadSuccess(response) { // 上传成功后,将返回的图片URL赋值给imageUrl this.imageUrl = response.data.imageUrl; } } }; </script> ``` 3. 完成上述代码后,当用户选择图片并上传成功时,上传接口会返回图片的URL。通过`handleUploadSuccess`方法将返回的URL赋值给`imageUrl`,然后在预览容器中显示预览图片即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值