angular实现配置页面样式（保存到数据库在另一个地方使用）功能总结

Angular自定义组件与图片上传

最新推荐文章于 2025-11-13 12:16:46 发布

原创最新推荐文章于 2025-11-13 12:16:46 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

知识点总计专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Angular中创建自定义组件用于图片上传和选择，并详细展示了使用Angular对象进行属性配置的方法，包括上传图片至服务器的过程及前端与后端的交互细节。

需要实现的功能如图：

一、需要对所能编辑的属性建立对象，这样会极大方便后续工作

对于属性通常用一个angualr对象形式，所有输入框、选择框都是为其属性修改值

二、在应用的地方使用ng-style即可，其中吧属性例如backgroundImage转换为background-image需要写一个独立的函数来实现所有属性的转换

三、考虑到保存到数据库以及回显的处理

以上即完成了属性配置化，其中有亮点的地方为

1.上传图片：

上传图片使用formatData

$scope.changeChartsPicture = function (event) {
    if (event.target.files[0]) {
        var formData = new FormData();
        formData.append("filename", event.target.files[0]);
        $.ajax({
            url: '/xxxx/uploadchartsbgpicture',
            type: 'post',
            processData: false,
            contentType: false,
            data: formData
        }).then(function (data) {
            if (data.code == "1") {
                var imgPath = data.path + data.filename;
                $scope.sceneConfigObj.options.chartStyle.backgroundImage = imgPath;
                $scope.getUserChartsImgs();
            } else {
                alert('上传失败');
            }
        });
    }
}

python代码

@api_view(http_method_names=['POST'])
@permission_classes((permissions.AllowAny,))
def uploadchartsbgpicture(request):
    f = request.FILES['filename']
    filename = time.strftime("%Y%m%d%H%M%S", time.localtime()) + f.name
    id = request.user.id
    path = './xxxx/user_' + str(id) + '/chartsbgimgs/'
    if os.path.exists(path):
        a = 1
    else:
        os.makedirs(path)
    try:
        distpath = path + filename
        if os.path.exists(distpath) and os.path.isfile(distpath):
            os.remove(distpath)
        with open(path + filename, 'wb+') as destination:
            for chunk in f.chunks():
                destination.write(chunk)
    except Exception as e:
        a = e.args
    return Response({'code': 1, "path": '/frontend/upload/user_' + str(id) + '/chartsbgimgs/', "filename": filename})

注意用request.FILES 和f.chunks来读取文件

两点二：用angular自定义组件

<user-imgs imgs="imgs" refresh-method="refreshStyle()" img-model="sceneConfigObj.options.globalStyle.backgroundImage"></user-imgs>

app.directive('userImgs', function () {
    return {
        restrict: 'E',
        templateUrl: '/xxxxxx/select-img.html',
        replace: true,
        scope: {
            imgs: '=', //存放图片的文件夹
            imgModel: '=',//选中事件
            refreshMethod: '&'//选中事件
        },
        link: function (scope, element, attrs, controller) {

        },
        controller: function ($scope, $http, $element, $timeout) {
            $scope.imgSelect = function (imgPath) {
                $scope.imgModel = imgPath;
                $scope.refreshMethod();
            };

            $scope.delImg = function (index) {
                $http.get(encodeURI('/api/dash/delUserImg?imgPath=' + $scope.imgs[index])).then(function (rs) {
                    if (rs.data.status == 'success') {
                        $scope.imgs.splice(index, 1);
                    }
                });
            };
        }
    };
});

directive的html

<div class="img-content">
        <div class="img-item" ng-repeat="($index, imgPath) in imgs track by $index">
            <div class="del-img" ng-click="delImg($index)">x</div>
            <img ng-click="imgSelect(imgPath)" ng-src="{{ imgPath }}">
        </div>
    </div>