金蝶云苍穹怎么引入本地图片
时间: 2024-03-22 12:38:12 浏览: 25
在金蝶云苍穹中引入本地图片,需要使用`<Upload>`组件和`<img>`标签。具体步骤如下:
1. 在Vue组件中引入`<Upload>`组件,例如:
```html
<upload
:action="uploadUrl"
:headers="headers"
:data="uploadData"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList">
<div class="upload-btn">上传图片</div>
</upload>
```
其中,`uploadUrl` 表示上传图片的接口地址,`headers` 表示上传图片时需要携带的请求头信息,`uploadData` 表示上传图片时需要携带的其他数据,`handleSuccess` 和 `handleError` 表示上传成功和上传失败的回调函数,`fileList` 表示已上传的图片列表。
2. 在上传成功的回调函数中,获取上传成功后服务器返回的图片地址,例如:
```javascript
handleSuccess(response, file, fileList) {
const imageUrl = response.data.imageUrl;
// 保存imageUrl到本地
this.imageUrl = imageUrl;
}
```
其中,`response` 表示服务器返回的响应数据,`file` 表示上传的文件对象,`fileList` 表示已上传的图片列表。将服务器返回的图片地址保存到本地,例如保存到`imageUrl`变量中。
3. 在模板中使用`<img>`标签展示本地图片,例如:
```html
<img :src="imageUrl" alt="本地图片">
```
其中,`:src` 属性绑定了`imageUrl`变量,表示图片的地址是从本地变量中获取的。这样就可以在页面中展示本地图片了。